View
20
Download
0
Category
Preview:
Citation preview
* Progressive Web Apps
TimWeb & Android Dev @ inovex
JonasWeb & .NET Dev @ inovex
Amsterdam, 2016Just a week ago
PWATF?
Progressive (Enhancement)Responsive
Connectivity independentApp-like
Fresh (up-to-date)Secure (HTTPS)
Discoverable (Search-Engines)Installable
Linkable (Shareable)
https://goo.gl/GxtUkp
"The 3 pillars of the web are HTML, CSS & JavaScript. You can't expect to yank one out and have it still working."
- Nolan Lawson, Fronteers 2016
https://goo.gl/faHjtM
The Manifest
<link rel="manifest" href="/manifest.json">
{ "name": "DevFest Hamburg", "short_name": "DevFest", "icons": [ … ], "display": "standalone", "start_url": "/?utm_source=manifest", "theme_color": "#FF00FF", "background_color": "#FFFFFF" …}
All praise the
Service Workerand Jake Archibald (@jaffathecake)
Fetch
Push
Sync
Installing
Waiting
Activating
Activated
navigator.serviceWorker.register('/sw.js')
sw.js
self.addEventListener('install', (ev) => { const wait = caches.open('v1').then(cache => { return cache.addAll([ 'app.min.js', 'app.min.css', // ... ]); }); ev.waitUntil(wait);});
Installing
Waiting
Activating
Activated
navigator.serviceWorker.register('/sw.js')
sw.js
Installing
Waiting
Activating
Activated
navigator.serviceWorker.register('/sw.js')
sw.js
self.addEventListener('activate', (ev) => { // old SW has been deleted; // this is about to take over; // clean up old caches;});
Installing
Waiting
Activating
Activated
navigator.serviceWorker.register('/sw.js')
sw.js
self.addEventListener('fetch', (ev) => { ev.respondWith( caches.match(ev.request).then(resp => {
return resp || fetch(ev.request);})
);});
GoogleChrome/sw-toolbox
toolbox.precache(['app.min.js','app.min.css']);
toolbox.router.get('/news/(.*)', toolbox.networkFirst); toolbox.cacheFirst toolbox.fastest toolbox.cacheOnly toolbox.networkOnly
importScripts('libs/sw-toolbox.js');
and more ...
GoogleChrome/sw-precache
require('sw-precache').write('sw.js', {
staticFileGlobs: ['build/**/*.{js,html,css,png,jpg,svg,woff}'],
stripPrefix: 'build'
});
Demo Time
W3C Push API
IETF webpush-protocol
IETF webpush-encryption
IETF webpush-vapid
Web Push Standards
navigator.serviceWorker.ready.then(registration => { return registration.pushManager.subscribe({ userVisibleOnly: true });})
.then(pushSubscription => { // send pushSubscription to application server});
Push Service
Application Server
{ "endpoint": "https:// ", "keys": { "p256dh": " ", "auth": " " }}
self.addEventListener('push', ev => { new Notification(...);});
Push Service
Application Server
POST → endpoint Payload
Payload
navigator.sericeWorker.ready.then(registration => { registration.pushManager.subscribe({ applicationServerKey: });});
Push Service
Application ServerPrivate
Public
POST Header- Authorization: WebPush [@]
And since we all crypto:
web-push-libs/web-push
Demo Time
Background Sync
navigator.serviceWorker.ready.then(sw => {sw.sync.register('send-msgs');
});
self.addEventListener('sync', ev => { if (ev.tag === 'send-msgs') { const promise = sendSomeCachedData(); ev.waitUntil(promise); }});
IndexedDB
Demo TimePhoto by Frances Berriman (CC-BY-NC-ND 2.0)
27
Browser Support
Web App Manifest
Service Workers
Push API
Background Sync
*
Better Browser Support
More Sync Options
More and more APIs
The Future
</talk>
Tim & Jonas
inovex GmbH – www.inovex.de
Karlsruhe / Hamburg / München / Köln /
Pforzheim
@tim_roes – www.timroes.de
@JonasMoosmann
Recommended