* 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