I service worker offrono un'utilità incredibile, ma all'inizio può essere difficile da lavorare. Workbox semplifica l'utilizzo dei Service worker. Tuttavia, poiché i service worker risolvono i problemi difficili, anche qualsiasi astrazione di questa tecnologia sarà complicata senza comprenderla. Di conseguenza, in queste prime sezioni di documentazione verrà trattata la tecnologia di base prima di addentrarci nelle specifiche di Workbox.
Per visualizzare un elenco aggiornato dei service worker, inserisci chrome://serviceworker-internals/ nella barra degli indirizzi.
Cosa offrono i Service worker?
I service worker sono asset JavaScript specializzati che fungono da proxy tra i browser web e i server web. Il loro obiettivo è migliorare l'affidabilità fornendo l'accesso offline e migliorando le prestazioni delle pagine.
Un ciclo di vita simile a quello di un'app con un progressivo miglioramento
I service worker rappresentano un miglioramento dei siti web esistenti. Ciò significa che se gli utenti di browser che non supportano i service worker visitano i siti web in cui vengono utilizzati, nessuna funzionalità di base viene interrotta. Ecco di cosa tratta il Web.
I Service worker migliorano progressivamente i siti web attraverso un ciclo di vita simile alle applicazioni specifiche della piattaforma. Pensa a cosa succede quando un'app nativa viene installata da uno store:
- Viene effettuata una richiesta per scaricare l'applicazione.
- L'app viene scaricata e installata.
- L'app è pronta per l'uso e può essere avviata.
- L'app si aggiorna per le nuove release.
Il ciclo di vita del service worker è simile, ma con un approccio di miglioramento progressivo. Alla prima visita a una pagina web che installa un nuovo service worker, la visita iniziale a una pagina fornisce la sua funzionalità di base durante il download del service worker. Dopo l'installazione e l'attivazione, un service worker controlla la pagina per offrire affidabilità e velocità migliori.
Accesso a un'API di memorizzazione nella cache basata su JavaScript
Un aspetto indispensabile della tecnologia dei service worker è l'interfaccia Cache,
un meccanismo di memorizzazione nella cache completamente separato dalla cache HTTP.
È possibile accedere all'interfaccia Cache nell'ambito del service worker e nel thread principale.
Si aprono innumerevoli possibilità per le interazioni basate sull'utente con un'istanza Cache.
Mentre la cache HTTP viene influenzata da istruzioni di memorizzazione nella cache specificate nelle intestazioni HTTP, l'interfaccia Cache è programmabile tramite JavaScript.
Ciò significa che le risposte di memorizzazione nella cache per le richieste di rete possono basarsi su qualsiasi logica migliore per un determinato sito web.
Ad esempio:
- Archiviare gli asset statici nella cache alla prima richiesta e pubblicarli solo dalla cache per ogni richiesta successiva.
- Memorizza il markup della pagina nella cache, ma pubblica solo il markup dalla cache in scenari offline.
- Pubblica risposte inattive per determinati asset dalla cache, ma aggiornale dalla rete in background.
- Per migliorare le prestazioni percepite, esegui lo streaming di contenuti parziali dalla rete e assemblali con una shell dell'app dalla cache.
Ognuno di questi è un esempio di strategia di memorizzazione nella cache. Le strategie di memorizzazione nella cache rendono possibili le esperienze offline e possono offrire prestazioni migliori eseguendo passaggi intermedi della riconvalida ad alta latenza dei controlli della cache HTTP. Prima di addentrarci in Workbox, esamineremo alcune strategie di memorizzazione nella cache e il codice che le rende attive.
Un'API asincrona e basata su eventi
Il trasferimento dei dati sulla rete è intrinsecamente asincrono. La richiesta di un asset richiede tempo prima che un server risponda a questa richiesta e il download della risposta. Il tempo impiegato è variabile e indeterminato. I Service worker soddisfano questa asincronia tramite un'API basata su eventi, utilizzando i callback per eventi quali:
- Quando un service worker installa.
- Quando un service worker sta attivando.
- Quando un service worker rileva una richiesta di rete.
Gli eventi possono essere registrati utilizzando un'API addEventListener familiare.
Tutti questi eventi possono potenzialmente interagire con l'interfaccia di Cache.
In particolare, la capacità di eseguire callback quando vengono inviate richieste di rete è fondamentale per fornire l'affidabilità e la velocità desiderate.
Lo svolgimento di un lavoro asincrono in JavaScript prevede l'utilizzo delle promesse.
Poiché le promesse sono alla base anche di async e await, queste funzionalità JavaScript possono essere utilizzate anche per semplificare il codice dei service worker (e Workbox!) e migliorare l'esperienza degli sviluppatori.
Precaching e memorizzazione nella cache del runtime
L'interazione tra un service worker e un'istanza Cache prevede due concetti distinti per la memorizzazione nella cache:
prememorizzazione nella cache e memorizzazione nella cache di runtime.
Ciascuno di questi aspetti è fondamentale per i vantaggi che un service worker può offrire.
La pre-memorizzazione nella cache è il processo di memorizzazione nella cache degli asset in anticipo, in genere durante l'installazione di un service worker.
Con la memorizzazione nella cache, è possibile scaricare e archiviare le risorse statiche chiave e i materiali necessari per l'accesso offline in un'istanza Cache.
Questo tipo di memorizzazione nella cache migliora anche la velocità delle pagine successive che richiedono gli asset pre-memorizzati nella cache.
La memorizzazione nella cache durante l'esecuzione si verifica quando una strategia di memorizzazione nella cache viene applicata alle risorse man mano che vengono richieste dalla rete durante il runtime. Questo tipo di memorizzazione nella cache è utile perché garantisce l'accesso offline alle pagine e agli asset che l'utente ha già visitato.
Se combinati, questi approcci all'utilizzo dell'interfaccia Cache in un service worker offrono un enorme vantaggio all'esperienza utente e forniscono comportamenti simili a un'app a pagine web altrimenti ordinarie.
Isolamento dal thread principale
Lo stato delle prestazioni di JavaScript è una sfida in continua evoluzione per il Web e dal punto di vista degli utenti dipende dalle funzionalità del dispositivo e dall'accesso a Internet ad alta velocità. Più JavaScript viene utilizzato, più diventa difficile creare siti web veloci che offrano esperienze utente piacevoli.
I Service worker sono come i web worker, in quanto tutto il lavoro che svolgono si svolge sui propri thread. Ciò significa che le attività dei service worker non competeranno per l'attenzione con altre attività nel thread principale. I Service worker sono orientati all'utente per definizione.
La strada da percorrere
Questa documentazione è solo una panoramica. Ci sono alcuni altri argomenti da soffermarti sui Service worker prima di affrontare Workbox in modo adeguato, ma ti assicuriamo che con una conoscenza solida dei service worker, l'utilizzo di Workbox sarà un'esperienza più facile e più produttiva.