Talk at Trondheim Developer Conference 2017

1. Progressive web applications i praksis
Mens du venter,
hvis du har du internett i lomma, gå til
opensites.kantega.no/tdc
og ha den klar til senere

2. Progressive web applications i praksis
Trondheim Developer Conference 2017
Håvard Wigtil
Kantega AS
@havardw

3. Innhold
1. Hva er progressive web applications?
2. Web app manifest
3. Service Workers
4. Offline
5. Web push

4. Hva er Progressive Web Applications?
● Webapplikasjoner som nærmer seg native applikasjoner i funksjonalitet
● Samlebetegnelse for et sett med API’er og praksiser

5. PWA sjekkliste
✔ Kjører på kryptert forbindelse (https)
✔ Responsivt design
✔ Virker i alle nettlesere
✔ Gir respons når nettleser er offline
✔ Laste raskt også på treigt nett
✔ Web app manifest
✔ Mulighet for server push

7. Caniuse?
● God støtte i Firefox, Chrome og Opera
● Støtte bak konfig-flagg i Edge
● Støtte på vei i Safari

8. Web app manifest
● Startpunkt for app
● Lar deg kjøre fullscreen på mobil
● Framstår som native app for det utrente øye

9. Web app manifest eksempel
{
"name": "Trondheim Developer Conference PWA demo",
"short_name": "PWA demo",
"start_url": "index.html",
"display": "standalone",
"background_color": "#034961",
"description": "Demonstrasjon av en enkel PWA",
"icons": [
{
"src": "images/tdcdemo48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/tdcdemo192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}

10. Service workers
● Fundamentet for mye av PWA
● En spesialisering av web workers
● Kjører i bakgrunnen
● Har ikke direkte tilgang til DOM
● Bruker meldinger for å kommunisere med webside

11. Livsløpet til en service worker
● Installeres ved første lasting
● Aktiv ved neste lasting
● Reinstalleres når service worker script har endret seg
● Gammel versjon aktiv så lenge den har åpne sider

12. Begrensninger på service workers
● Kun én service worker per kontekst
● Må serves fra rot-katalogen til det den skal kontrollere
● Kun HTTPS
● Ikke tilgang til dokument (DOM)
● Kun et subset av navigator API

13. Service workers som cache
● Har egen API for å cache requests
● Service workers kan fange opp alle requests
● Kan svare med lagret ressurs eller annen side
● «Som en proxy-server i applikasjonen din»

14. Demo for offline
● Demo på https://opensites.kantega.no/tdc/
● Prøv navigering med og uten nettkobling («flight mode» e.l.)

15. Kode for å definere cache
const urlsToCache = [
"./",
"./index.html",
"./pages/offline.html",
"./pages/messages.html",
"./pages/program.html",
"./styles.css",
"./script/demo.js",
"./script/messages.js"
];
// Create cache on install
self.addEventListener("install", function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});

16. Kode for å bruke cache
self.addEventListener("fetch", function(event) {
if (event.request.method !== "GET") {
return;
}
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
} else {
return fetch(event.request);
}
}
)
.catch(function(error) {
return caches.match('./pages/offline.html');
})
);
});
❶
❷
❸
❹

17. Web Push
● Meldinger fra server til nettleser, også når side ikke er aktiv
● Mottas som event av service worker
● Hver nettleser har sin meldingsserver
● Mer komplisert enn de fleste JavaScript-API’er

18. Flyt for web push
Applikasjon
2
3
6
5
4
1. Nettleser får servers offentlige
krypteringsnøkkel
2. Nettleser registrerer nøkkel hos
meldingsserver
3. Nettleser varsler
applikasjonsserver om
abonnement
4. Ny hendelse i applikasjonsserver
5. Varsel fra applikasjonsserver til
meldingsserver
6. Verifisert varsel til nettleser
1

19. Å nei, sa han «kryptering»?
● Lær deg grunnprinsippene
● ... og bruk et bibliotek!

20. Web push og sikkerhet
● Kan du stole på Google (eller Mozilla)?
● Asymmetrisk kryptering / offentlig nøkkelkryptering brukes for å bevare sikkerhet
● Meldinger signeres med applikasjonsservers nøkkel for å bekrefte opprinnelse
● Nettleser lager eget nøkkelpar
● Meldinger krypteres med nettlesers offentlige nøkkel så den kun kan leses av
nettleser

21. Kode for registrering av abonnement
navigator.serviceWorker.getRegistration().then(function(serviceWorkerRegistration) {
var options = {
userVisibleOnly: true,
applicationServerKey: base64ToArrayBuffer(SERVER_PUBLIC_KEY)
};
serviceWorkerRegistration.pushManager.subscribe(options).then(function(pushSubscription) {
var params = new URLSearchParams();
params.append("endpoint", pushSubscription.endpoint);
params.append("clientKey", arrayBufferToBase64(pushSubscription.getKey("p256dh")));
params.append("sharedSecret", arrayBufferToBase64(pushSubscription.getKey("auth")));
fetch("../api/subscribe", {
method: "POST",
body: params
}).then(function(response) {
if (response.ok) {
console.log("Subscription sent to server");
}
});
});
});
❶
❷
❸

22. Kode for å sende melding til meldingsserver
private void notifyClients(String message) {
byte[] encodedMessage = message.getBytes(Charset.forName("UTF-8"));
for (Subscription subscription : SubscriptionStore.getSubscriptions()) {
Notification notification = new Notification(subscription.getEndpoint(),
subscription.getClientKey(),
subscription.getSharedSecret(),
encodedMessage);
executorService.execute(() -> {
try {
HttpResponse response = pushService.send(notification);
} catch (Exception e) {
log.warn("Notify for {} threw execption {}: {}",
subscription.getEndpoint(), e.getClass().getName(), e.getMessage());
}
});
}
}

23. Demo for push
● Ta opp demo på https://opensites.kantega.no/tdc/ og gå til «Meldinger»
● Huk av sjekkboks for å starte abonnement på push-meldinger

24. Spørsmål?
Kode på https://github.com/kantega/tdc-pwa-demo

25. Bonus
● Service worker gotcha’s
● Fetch API
● PostMessage