Questo codelab mostra come registrare un service worker dall'applicazione web e utilizzare Chrome DevTools per osservarne il comportamento. Illustra inoltre alcune tecniche di debug che potresti trovare utili quando hai a che fare con i service worker.
Acquisisci familiarità con il progetto di esempio
I file del progetto di esempio più pertinenti per questo codelab sono:
register-sw.jsinizia vuoto, ma contiene il codice utilizzato per registrare il service worker. Viene già caricato tramite un tag<script>all'interno delindex.htmldel progetto.- Anche
service-worker.jsè vuoto. È il file che conterrà il service worker per questo progetto.
Aggiungi il codice di registrazione del service worker
Un service worker (anche uno vuoto, come il file service-worker.js corrente) non verrà utilizzato, a meno che non venga registrato prima. Puoi farlo tramite una chiamata a:
navigator.serviceWorker.register(
'/service-worker.js'
)
all'interno del file register-sw.js.
Tuttavia, prima di aggiungere il codice, ci sono un paio di aspetti da prendere in considerazione.
Innanzitutto, non tutti i browser supportano i service worker. Questo è particolarmente vero per le versioni precedenti dei browser che non si aggiornano automaticamente. Una best practice consiste quindi nel chiamare navigator.serviceWorker.register() in modo condizionale, dopo aver verificato se navigator.serviceWorker è supportato.
In secondo luogo, quando registri un service worker, il browser esegue il codice nel tuo
file service-worker.js e potrebbe iniziare a scaricare gli URL per compilare
le cache, a seconda del codice nei gestori di eventi
install
e
activate
del tuo service worker.
L'esecuzione di codice aggiuntivo e il download di asset possono utilizzare risorse preziose che il tuo browser potrebbe altrimenti utilizzare per visualizzare la pagina web corrente. Per evitare questa interferenza, è buona norma ritardare la registrazione di un service worker fino a quando il browser non ha completato il rendering della pagina corrente. Un modo pratico per approssimarlo è attendere che l'evento window.load sia stato attivato.
Per unire questi due punti, aggiungi questo codice di registrazione dei service worker per uso generico al file register-sw.js:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
Aggiungi codice di logging del service worker
Nel file service-worker.js si trova la logica per l'implementazione dei service worker. Dovresti usare una combinazione di eventi del ciclo di vita dei service worker, API Cache Storage e informazioni sul traffico di rete della tua app web per creare un service worker perfettamente preparato, pronto a gestire tutte le richieste della tua app web.
Ma... è tutto per imparare più tardi. In questa fase ci si concentra sull'osservazione di vari eventi dei service worker e sull'utilizzo di DevTools di Chrome DevTools per eseguire il debug dello stato del service worker.
A questo scopo, aggiungi il seguente codice a service-worker.js, che registrerà i messaggi nella console DevTools in risposta a vari eventi (ma non fai molto altro):
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
Acquisisci familiarità con il riquadro Service worker in DevTools
Ora che hai aggiunto il codice ai file register-sw.js e service-worker.js, è il momento di visitare la versione live del progetto di esempio e osservare il service worker in azione.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
. - Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Console.
Dovresti vedere qualcosa come i seguenti messaggi di log, a indicare che il service worker è stato installato e attivato:
Quindi vai alla scheda Applicazioni e seleziona il riquadro Service worker. Il risultato dovrebbe essere simile al seguente:
In questo modo puoi sapere che esiste un service worker con URL di origine service-worker.js per l'app web solar-donkey.glitch.me, che al momento è attivato e in esecuzione. Indica inoltre che attualmente esiste un client (scheda aperta) controllato dal service worker.
Puoi utilizzare i link in questo riquadro, ad esempio Unregister o stop, per apportare
modifiche al service worker attualmente registrato ai fini del debug.
Attiva il flusso di aggiornamento dei service worker
Uno dei concetti fondamentali da comprendere quando si sviluppa con i service worker è l'idea di un flusso di aggiornamento.
Dopo che gli utenti visitano un'app web che registra un service worker, finiranno con il codice relativo alla copia corrente di service-worker.js installata sul loro browser locale. Ma cosa succede quando aggiorni la versione
service-worker.js archiviata sul tuo server web?
Quando un visitatore ricorrente torna a un URL che rientra nell'ambito di un service worker, il browser richiederà automaticamente l'ultima versione di service-worker.js e verificherà la presenza di eventuali modifiche. Se lo script del service worker è diverso, il nuovo service worker avrà la possibilità di installarlo, attivarlo e alla fine assumere il controllo.
Per simulare questo flusso di aggiornamento, torna all'editor di codice del progetto e apporta qualsiasi modifica al codice. Una modifica rapida prevede la sostituzione
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
con
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
Dopo aver apportato la modifica, torna alla versione live dell'app di esempio e ricarica la pagina con la scheda dell'applicazione DevTools ancora aperta. Il risultato dovrebbe essere simile a questo:
Questo indica che in questo punto sono installate due versioni del service worker. La versione precedente, già attivata, è in esecuzione e ha il controllo della pagina corrente. La versione aggiornata del service worker è riportata
qui sotto. È nello stato waiting e rimarrà in attesa fino alla chiusura di tutte le schede aperte controllate dal service worker precedente.
Questo comportamento predefinito assicura che, se il nuovo service worker ha un comportamento diverso da quello precedente, ad esempio un gestore fetch che risponde con risorse incompatibili con le versioni precedenti dell'app web, non verrà applicato finché un utente non avrà chiuso tutte le istanze precedenti dell'app web.
Riepilogo
A questo punto dovresti avere familiarità con la procedura di registrazione di un service worker e con l'osservazione del comportamento di un service worker utilizzando DevTools di Chrome.
Ora puoi iniziare a implementare strategie di memorizzazione nella cache e tutte le altre funzionalità utili per caricare la tua app web in modo affidabile e veloce.