Sempre più di frequente sentiamo parlare di nuove librerie, framework o linguaggi. Tutte queste nuove tecnologie promettono miracoli ma il nostro tempo è una risorsa finita e non abbiamo il lusso di poter approfondire ogni novità.
Le PWA si basano su tecnologie che già usiamo tutti i giorni nello sviluppo WEB quindi, senza farci intimidire, possiamo approcciare qualcosa che effettivamente rivoluzioni il nostro lavoro e che possa farlo con il minimo sforzo da parte nostra.
4. Le caratteristiche di una PWA
Veloce
Secondo un
sorprendente
sondaggio gli
utenti non
apprezzano le app
lente.
Affidabile
L’utente deve
poter interagire
a prescindere
dalle condizioni
di rete.
Accattivante
Una PWA è
installabile,
offre
un’esperienza
full-screen e
consente di usare
push
notifications.
5. ... ma in pratica?
HTTPS
Tutto il traffico
DEVE essere
cifrato.
Manifest
Un semplice file
per indicare al
browser che ha a
che fare con una
PWA.
Service Worker
Un JS in cui
avviene la magia
che consente di
gestire cache e
notifiche push.
10. Service Worker LifeCycle
▪ .register()
▪ Evento install
▪ Una promise viene passata a
installEvent.waitUntil()
▪ Un service worker non riceve eventi e
push fino a quando diventa "active".
▪ Le richieste di una pagina non passano da
un service worker a meno che la pagina
stessa sia passata da un service worker
▪ clients.claim() può prendere il controllo
immediatamente
11. <!DOCTYPE html>
An image will appear here in 3 seconds:
<script>
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered!', reg))
.catch(err => console.log('Boo!', err));
setTimeout(() => {
const img = new Image();
img.src = '/dog.svg';
document.body.appendChild(img);
}, 3000);
</script>
13. Service Worker Update
▪ Download nuovo SW
▪ Eseguito in parallelo (riceve il
suo evento install)
▪ Attende che la precedente
versione non sia più in uso
▪ Oppure self.skipWaiting()
14. Made Easy
Workbox is a library that bakes in
a set of best practices and removes
the boilerplate every developer
writes when working with service
workers.
15. Workbox
▪ Precaching
▪ Runtime caching
▪ Strategies
▪ Request routing
▪ Background sync
▪ Helpful debugging
▪ Greater flexibility and feature
set than sw-precache and
sw-toolbox