* Progressive Web Apps

* Progressive Web Apps

Tim
Web & Android Dev @ inovex
Amsterdam, 2016
Just a week ago
Jonas
Web & .NET Dev @ inovex

Progressive (Enhancement)
Responsive
Fresh (up-to-date)
Secure (HTTPS)
PWATF?
Discoverable (Search-Engines)
Installable
Linkable (Shareable)
App-like
Connectivity independent
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

{
}
"name": "DevFest Hamburg",
"short_name": "DevFest",
"icons": [ … ],
"display": "standalone",
"start_url": "/?utm_source=manifest",
"theme_color": "#FF00FF",
"background_color": "#FFFFFF"
…

All praise the
Service Worker
and Jake Archibald (@jaffathecake)

Push
Sync
Fetch

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
Installing
self.addEventListener('activate', (ev) => {
// old SW has been deleted;
// this is about to take over;
// clean up old caches;
});
Waiting
Activating
Activated

navigator.serviceWorker.register('/sw.js')
sw.js
Installing
self.addEventListener('fetch', (ev) => {
ev.respondWith(
caches.match(ev.request).then(resp => {
return resp || fetch(ev.request);
})
);
});
Waiting
Activating
Activated

GoogleChrome/sw-toolbox
importScripts('libs/sw-toolbox.js');
toolbox.precache(['app.min.js','app.min.css']);
toolbox.router.get('/news/(.*)', toolbox.networkFirst);
toolbox.cacheFirst
toolbox.fastest
toolbox.cacheOnly
toolbox.networkOnly
and more ...

GoogleChrome/sw-precache
require('sw-precache').write('sw.js', {
staticFileGlobs: ['build/**/*.{js,html,css,png,jpg,svg,woff}'],
stripPrefix: 'build'
});

Demo Time

Web Push Standards
W3C Push API
IETF webpush-protocol
IETF webpush-encryption
IETF webpush-vapid

Push
Service
{
}
"endpoint": "https:// ",
"keys": {
"p256dh": " ",
"auth": " "
}
Application Server
navigator.serviceWorker.ready.then(registration => {
return registration.pushManager.subscribe({ userVisibleOnly: true });
})
.then(pushSubscription => {
// send pushSubscription to application server
});

Payload
Push
Service
POST → endpoint
Payload
Application Server
self.addEventListener('push', ev => {
});
new Notification(...);

Push
Service
POST Header
- Authorization: WebPush [@]
Private
Public
Application Server
navigator.sericeWorker.ready.then(registration => {
});
registration.pushManager.subscribe({ applicationServerKey: });

And since we all
crypto:
web-push-libs/web-push

Demo Time

Background Sync
navigator.serviceWorker.ready.then(sw => {
sw.sync.register('send-msgs');
});
IndexedDB
self.addEventListener('sync', ev => {
if (ev.tag === 'send-msgs') {
const promise = sendSomeCachedData();
ev.waitUntil(promise);
}
});

Demo Time
Photo by Frances Berriman (CC-BY-NC-ND 2.0)

Browser Support
Web App Manifest
*
Service Workers
Push API
Background Sync
27

The Future
Better Browser Support
More Sync Options
More and more APIs