Questo codelab ti mostra come registrare un service worker dall'interno della tua applicazione web e utilizzare Chrome DevTools per osservarne il comportamento. Descrive inoltre alcune tecniche di debug che potrebbero essere utili quando si ha a che fare con i service worker.
Acquisisci familiarità con il progetto di esempio
I file nel progetto di esempio più pertinenti per questo codelab sono:
- Il campo
register-sw.jsall'inizio è vuoto, ma conterrà il codice utilizzato per registrare il service worker. È già in fase di caricamento tramite un tag<script>all'interno delleindex.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 l'attuale file service-worker.js)
non verrà utilizzato a meno che non venga
registrato
prima. A tal fine, puoi utilizzare una chiamata per:
navigator.serviceWorker.register(
'/service-worker.js'
)
all'interno del file register-sw.js.
Tuttavia, prima di aggiungere il codice, è necessario tenere conto di un paio di punti.
In primo luogo, non tutti i browser supportano i service worker. in particolare per le versioni meno recenti dei browser che
non si aggiornano automaticamente. Pertanto, ti consigliamo di 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 file service-worker.js e potrebbe potenzialmente iniziare a scaricare 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 browser potrebbe altrimenti utilizzare per visualizzare la pagina web corrente. Per evitare questa interferenza, è buona norma ritardare la registrazione di un service worker finché il browser non ha completato il rendering della pagina corrente. Un modo conveniente per approssimativamente farlo è attendere fino a quando
l'evento window.load non viene attivato.
Combinando questi due punti, aggiungi questo codice di registrazione del service worker
per uso generico al file register-sw.js:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
Aggiungi del codice di logging del service worker
Il file service-worker.js è il punto in cui normalmente verrebbe impiegata tutta la logica per l'implementazione dei service worker. Dovresti utilizzare una combinazione di eventi del ciclo di vita dei service worker, dell'API Cache Storage e informazioni sul traffico di rete della tua app web per creare un service worker perfettamente creato, 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 del service worker e sull'uso di DevTools di Chrome 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 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, devi 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 "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Console.
Dovresti vedere qualcosa di simile ai seguenti messaggi di log, che indicano 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:
Questo ti informa che esiste un service worker con URL di origine service-worker.js, per l'app web solar-donkey.glitch.me, attualmente attivata e in esecuzione. Indica inoltre che attualmente c'è un client (scheda aperta) controllato dal service worker.
Puoi usare i link in questo riquadro, ad esempio Unregister o stop, per apportare
modifiche al service worker attualmente registrato a scopo di debug.
Attiva il flusso di aggiornamento del service worker
Uno dei concetti chiave da comprendere durante lo sviluppo con i service worker è l'idea di un flusso di aggiornamento.
Dopo che gli utenti visitano un'app web che registra un service worker, riceveranno il codice della copia corrente di service-worker.js installata nel loro browser locale. Ma cosa succede quando aggiorni la versione di service-worker.js archiviata sul tuo server web?
Quando un visitatore di ritorno torna a un URL nell'ambito di un service worker, il browser richiederà automaticamente l'ultimo valore service-worker.js e verifica la presenza di eventuali modifiche. Se qualcosa nello script del service worker è diverso, il nuovo service worker avrà la possibilità di eseguire l'installazione, l'attivazione e alla fine prenderà il controllo.
Per simulare questo flusso di aggiornamento, torna all'editor di codice per il tuo progetto e apporta qualsiasi modifica al codice. Una modifica rapida sarebbe la sostituzione
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
grazie a
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 Applicazione DevTools ancora aperta. Il risultato dovrebbe essere simile al seguente:
Questo mostra che in questo punto sono installate due versioni del service worker. La versione precedente, che era già stata attivata, è in esecuzione e controlla la pagina corrente. La versione aggiornata del service worker è
elencata di seguito. È nello stato waiting e rimarrà in attesa fino alla chiusura di tutte le schede aperte controllate dal Service worker precedente.
Questo comportamento predefinito garantisce che se il nuovo
service worker presenta una differenza fondamentale nel comportamento di quello precedente, ad esempio un
gestore fetch che risponde con risorse incompatibili con le versioni precedenti
della tua app web, non venga applicato finché un utente non ha arrestato tutte le istanze precedenti della tua applicazione web.
Riepilogo
Ora dovresti acquisire dimestichezza con la procedura di registrazione di un service worker e di osservazione del suo comportamento tramite DevTools di Chrome.
Ora puoi iniziare a implementare strategie di memorizzazione nella cache e tutte le cose utili che aiuteranno la tua applicazione web a caricarsi rapidamente e in modo affidabile.