Confirmed users
394
edits
Firefox OS/Pinned Apps: Difference between revisions
Jump to navigation
Jump to search
Added implementation details
Benfrancis (talk | contribs) (Adding UI mockups) |
Benfrancis (talk | contribs) (Added implementation details) |
||
| Line 92: | Line 92: | ||
[[File:App_directory.png|650x400px|framed|center]] | [[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> | |||