Stanco delle solite Web App? Passa al Prgressive

Stanco delle solite
web app? Passa al
Progressive!
Federico “Edo” Granata
By

Hello World!
Io sono Federico “Edo” Granata
Potete trovarmi su
https://federicogranata.dev

1
Progressive Web App
Non facciamoci
intimorire

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.

... 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.

Service Worker
▪ JavaScript
▪ Separato dalla pagina
▪ Background
▪ Event Driven
▪ Magia

... magia?
PRO
▪ Programmable Proxy
▪ Background Sync
▪ Push Notifications
CONTRO
▪ DOM
▪ Nessuna persistenza

Programmable Proxy
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});

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

<!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>

self.addEventListener('install', event => {
event.waitUntil(
caches.open('static-v1').then(fuction(cache) {
cache.add('/cat.svg');
});
);
});
self.addEventListener('activate', event => {
console.log('ready');
});
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
if (url.origin == location.origin &&
url.pathname == '/dog.svg') {
event.respondWith(caches.match('/cat.svg'));
}
});
DEMO 1 DEMO 2

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()

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.

Workbox
▪ Precaching
▪ Runtime caching
▪ Strategies
▪ Request routing
▪ Background sync
▪ Helpful debugging
▪ Greater flexibility and feature
set than sw-precache and
sw-toolbox

Workbox Programmable Proxy - Basic
workbox.routing.registerRoute(
/.(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate(),
);

Workbox Programmable Proxy - Intermediate
/.(?:png|gif|jpg|jpeg|svg)$/,
new workbox.strategies.CacheFirst({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
}),
);

Workbox Programmable Proxy - Advanced
/^https://fonts.gstatic.com/,
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
}),
],
}),
);

Workbox Background Sync
const bgSyncPlugin = new
workbox.backgroundSync.Plugin('myQueueName', {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
});
//api/.*/*.json/,
new workbox.strategies.NetworkOnly({
plugins: [bgSyncPlugin]
}),
'POST'
);

Workbox offre molto altro
▪ 13 moduli Service Worker
▪ 1 modulo Window
▪ Tools per automatizzare (cli,
npm, gulp, grunt e webpack)

Risorse Utili
▪ Manifest - http://bit.ly/313G047
▪ Install - http://bit.ly/311fYOZ
▪ Service Worker - http://bit.ly/2KqBU03
▪ SW LyfeCycle - http://bit.ly/30Hjuxb
▪ Workbox - http://bit.ly/311EAr5
▪ PWA Starter Kit - http://bit.ly/2JU1Wau
▪ Bento Starter - http://bit.ly/2JC4ZVI
▪ PWA Checklist - http://bit.ly/313GtTV

Thanks!
ANY QUESTIONS?
You can find me at:
federico.granata@gmail.com
https://federicogranata.dev
http://bit.ly/Edo-LinkedIn

CREDITS
Special thanks to all the people who made and released
these awesome resources for free:
▪ Presentation template by SlidesCarnival

Stanco delle solite Web App? Passa al Prgressive

More Related Content

What's hot (11)

Similar to Stanco delle solite Web App? Passa al Prgressive (20)

More from Commit University (20)

Stanco delle solite Web App? Passa al Prgressive