Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Piero Bellomo, profile picture
Uploaded byPiero Bellomo
PPTX, PDF648 views

Service workers - Forza lavoro al servizio della tua Performance

The document discusses Progressive Web Applications (PWAs) and their functionalities that combine web standards with a native app experience, including service workers, caching strategies, and performance measurement. It details the registration and lifecycle of service workers, along with various APIs that enhance the PWA experience. The text also provides resources for further reading and understanding of PWAs and service workers.

Software◦
Download to read offline
Turin Web Performance Group Service Workers Forza lavoro al servizio della tua Performance con Piero Bellomo, @ptbello performance-obsessed full stack dev
● Contesto ● Le PWA ● I Service Worker ● Service Worker Performance ● Fonti e approfondimenti Indice
PWA “Progressive Web Applications (PWAs) are web applications that load like regular web pages or websites but can offer functionality traditionally available only to native apps. PWAs combine the open standards of the web to provide benefits of a rich mobile experience.” Wikipedia The Future Native Apps Progressive Web Apps Contesto ➜ Le PWA
Native feel ● Add to Home screen ● Hardware access ● Notifiche push ● ...and the list goes on Contesto ➜ Le PWA PWA
Native feel ● Add to Home screen ● Hardware access ● Notifiche push ● ...and the list goes on Reliability Modalità offline in funzione della connettività disponibile Contesto ➜ Le PWA PWA
Native feel ● Add to Home screen ● Hardware access ● Notifiche push ● ...and the list goes on Reliability Modalità offline in funzione della connettività disponibile Performance Ooooh! Caching! Contesto ➜ Le PWA PWA
Gli ingredienti di una PWA ● https:// ● Manifest Contesto ➜ Le PWA ➜ Ingredienti ● APIs ● SW
Manifest Contesto ➜ Le PWA ➜ Ingredienti ➜ Manifest …of the Communist Party? Ahem, sorry, No Party.
Manifest Un file Json con informazioni utili al (mobile) OS per presentare l’App nelle diverse situazioni Contesto ➜ Le PWA ➜ Ingredienti ➜ Manifest <head> ... <link rel="manifest" href="myapp.webmanifest"> ... </head>
APIs Il Presente ● Audio/Video ● Background Sync ● Storage ○ LocalStorage (obsoleto) ○ IndexedDB ○ Cache API ● Fetch (XMLHttpRequest on crack) ● Geolocation ● Notifiche Il Futuro ● Payment Request ● Web Speech ● Web Authentication ● Web Share ● Geofencing? ● Gamepad? Contesto ➜ Le PWA ➜ Ingredienti ➜ APIs
Service Worker Contesto ➜ Le PWA ➜ Ingredienti ➜ Service Worker Il Cervello della banda
Cos’è un Service Worker ● Background Process può essere idle o active Contesto ➜ il Service Worker ➜ Cos’è
Cos’è un Service Worker ● Background Process può essere idle o active ● Network Proxy intercetta richieste con fetch Contesto ➜ il Service Worker ➜ Cos’è
Cos’è un Service Worker ● Background Process può essere idle o active ● Network Proxy intercetta richieste con fetch ● No DOM access ma accesso indiretto via postMessage e Clients Contesto ➜ il Service Worker ➜ Cos’è
Cos’è un Service Worker ● Background Process può essere idle o active ● Network Proxy intercetta richieste con fetch ● No DOM access ma accesso indiretto via postMessage e Clients ● Persistent Data Access client-side storage con Cache Contesto ➜ il Service Worker ➜ Cos’è
Registrazione index.html <head> ... <script src="./app.js"></script> ... </head> if( 'serviceWorker' in navigator ) { navigator.serviceWorker.register('./sw.js'); } else { console.log('serviceWorker not available!); } add Event Listeners ➜ app.js sw.js Contesto ➜ il Service Worker ➜ Registrazione
self.addEventListener('install', function(e) { //… do stuff that happens only once // (will also fire if sw is updated) // e.g. cache static assets } Lifecycle Contesto ➜ il Service Worker ➜ Lifecycle
self.addEventListener('activate', function(e) { //… do stuff that only need to happen // when you updated to a newer version // e.g. clear/amend cache } Lifecycle Contesto ➜ il Service Worker ➜ Lifecycle
Lifecycle Contesto ➜ il Service Worker ➜ Lifecycle self.addEventListener('fetch', function (e) { // intercept and manipulate every. single. request. // this is where the magic happens }
Service Worker Performance Service Worker Cache API Browser cache via http headersvs Consistency Consistency Speed Granularity Granularity Speed Service Worker Performance ➜ vs Browser cache
Service Worker Performance Tools fetch(e.request).then(function (response) { return response; }); Service Worker Performance ➜ Tools ➜ Fetch self.addEventListener('fetch', function (e) { if( e.request.url.indexOf('static.myapp.com') !== -1 ) { e.respondWith( // some caching strategy ); } else { e.respondWith( // some other caching strategy ); } }); fetch
Service Worker Performance Tools caches.match(myRequest).then (function (r) { return r; }); caches.open('myCacheName').then(function(cache) { return cache.match(myRequest).then (function (r) { return r; }); }); Service Worker Performance ➜ Tools ➜ Cache cache(s) caches.open('myCacheName').then(function (cache) { cache.put(myRequest, myResponse); … cache.add(myURL); … cache.addAll(myURLsArray); });
Caching strategies self.addEventListener('fetch', function (e) { if(navigator.onLine) { return; } else { e.respondWith( caches.match(e.request).then(function (r) { return r }) ); } }); Network first, fallback cache Service Worker Performance ➜ Caching strategies
Caching strategies self.addEventListener('fetch', function (e) { e.respondWith( caches.match(e.request).then(function (r) { if(r) { return r; } else { if(navigator.onLine) { fetch(e.request).then(function (response) { caches.open('myCacheName').then(function (cache) { cache.put(e.request, response.clone()); }); return response; }); } } })); }); Service Worker Performance ➜ Caching strategies Cache first, fallback Network then Add to Cache
Caching strategies self.addEventListener('install', function (e) { e.waitUntil( caches.open('myCacheName').then(function (cache) { for( let i = 0; i < myCacheData.length; i++ ) { cache.add(myCacheData[i]); } // OR: cache.addAll(myCacheData); }) ); }); self.addEventListener('fetch', function (e) { e.respondWith( caches.match(e.request).then(function (r) { return r }) ); }); Service Worker Performance ➜ Caching strategies Preload, then Offline
Misurare la Performance dei SW Service Worker Performance ➜ Misurare ● Synthetic testing ● Real User Monitoring
Synthetic testing SW supported SW in document No SW support SW in document SW supported No SW in document No SW support No SW in document Service Worker Performance ➜ Synthetic testing First visit Repeat visit
Real User Monitoring Browser supports SW? Unsupported Controlled Supported SW controls page? Service Worker Performance ➜ Real User Monitoring 'serviceWorker' in navigator? navigator.serviceWorker.controller?
Impatto Service Worker Performance ➜ Impatto da “Measuring the Real-world Performance Impact of Service Workers” by Philip Walton, Google
Impatto Service Worker Performance ➜ Impatto
Impatto Service Worker Performance ➜ Impatto
Fonti e approfondimenti Fonti e approfondimenti ➜ 1/2 Requisito: familiarità con vanilla javascript e l’oggetto promise ●plainJS - The Vanilla JavaScript Repository ●MDN: Promise PWA ●Google: Your First Progressive Web App ●MDN: Progressive Web Apps ●MDN: Web APIs ●MDN: Manifest ●Manifest generator tool SW ●MDN: Service Worker API ●Google: Intro to Service Workers ●Google: Service Worker Lifecycle ●Google: Debugging Service Workers Fetch ●MDN: Using fetch ●MDN: Fetch API ●MDN: FetchEvent Cache(s) ●Google: Caching Files with Service Worker ●MDN: Cache ●MDN: CacheStorage Storage limits ●Google: Live Data in the Service Worker ●html5rocks: Working with quota on mobile browsers ●Browser Storage abuser tool
Fonti e approfondimenti ➜ 2/2 On vs. http header caching ●Google: High-performance service worker loading ●Facebook: Web performance: Cache efficiency exercise Performance ●Google: Measuring the Real-world Performance Impact of Service Workers ●Baqend: Rethinking Web Performance with Service Workers ●PWAStats (fonte inesauribile di dati reali) Bonus ●MDN: The Service Worker Cookbook (da non perdere la sezione Caching Strategies) ●geddski & Google: Service Workies (un gioco per imparare I Service Workers!) Fonti e approfondimenti
Turin Web Performance Group Grazie! https://twitter.com/ptbello https://www.facebook.com/piero.bellomo https://github.com/ptbello/