Confirm
394
edits
Changes
Added implementation details
[[File:App_directory.png|650x400px|framed|center]]
== Implementation ==
=== Web App Manifest ===
A [http://w3c.github.io/manifest/ manifest] is linked from a web page with a link relation:
<code>
<link rel=”manifest” href=”/manifest.json”>
</code>
A manifest can specify an app name, icon, display mode and orientation:
<code>
{
"name": "GMail"
"icons": {...},
"display": "standalone",
"orientation": “portrait”,
...
}
</code>
There is a [https://github.com/w3c/manifest/issues/114 proposal] for a manifest to be able to specify an app scope:
<code>
{
...
"scope": "/"
...
}
</code>
=== Service Worker ===
There is also a [https://github.com/w3c/manifest/issues/161 proposal] to be able to reference a [http://www.w3.org/TR/service-workers/ Service Worker] from within the manifest:
<code>
{
...
service_worker: {
src: "app.js",
scope: "/mail"
...
}
</code>
A Service Worker has an install method which can populate a cache with a web app's resources when it is registered:
<code>
this.addEventListener('install', function(event) {
event.waitUntil(
caches.create('v1').then(function(cache) {
return cache.add(
'/index.html',
'/style.css',
'/script.js',
'/favicon.ico'
);
}, function(error) {
console.error('error populating cache ' + error);
};
);
});
</code>
So that the app can then respond to requests for resources when offline:
<code>
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).catch(function() {
return event.default();
})
);
});
</code>
