Collaborare con i Service worker

Jeff Posnick

Questo codelab mostra come registrare un servizio worker all'interno della tua applicazione web e utilizzare gli strumenti per sviluppatori di Chrome per osservarne il comportamento. Inoltre, illustra alcune tecniche di debug che potresti trovare utili quando utilizzi i worker di servizio.

Acquisire dimestichezza con il progetto di esempio

I file del progetto di esempio più pertinenti a questo codelab sono:

• register-sw.js è inizialmente vuoto, ma conterrà il codice utilizzato per registrare il service worker. Viene già caricato tramite un tag <script> all'interno del index.html del progetto.
• service-worker.js è vuoto allo stesso modo. È 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 sia stato registrato in precedenza. Puoi farlo chiamando:

navigator.serviceWorker.register(
  '/service-worker.js'
)

all'interno del file register-sw.js.

Prima di aggiungere il codice, però, ci sono alcuni punti da tenere conto.

Innanzitutto, non tutti i browser supportano i worker di servizio. Questo vale in modo particolare per le versioni precedenti dei browser che non si aggiornano automaticamente. Pertanto, è consigliabile chiamare navigator.serviceWorker.register() in modo condizionale, dopo aver controllato se navigator.serviceWorker è supportato.

In secondo luogo, quando registri un worker di servizio, il browser esegue il codice nel file service-worker.js e potrebbe potenzialmente iniziare a scaricare gli URL per compilare le cache, a seconda del codice nei gestori eventi install e activate del worker di servizio.

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 prassi posticipare la registrazione di un servizio worker fino al termine del rendering della pagina corrente da parte del browser. Un modo pratico per approssimare questo valore è attendere l'evento window.load.

Combinando questi due punti, aggiungi questo codice di registrazione del servizio worker per uso generale 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 è la posizione in cui normalmente viene inserita tutta la logica per l'implementazione del tuo worker di servizio. Dovresti utilizzare una combinazione di eventi di ciclo di vita del worker di servizio, dell'API Cache Storage e delle conoscenze sul traffico di rete della tua app web per creare un worker di servizio perfettamente realizzato, pronto a gestire tutte le richieste della tua app web.

Ma… questo è tutto per ora. In questa fase, l'attenzione è incentrata sull'osservazione di vari eventi del servizio worker e sull'utilizzo di DevTools di Chrome per eseguire il debug dello stato del servizio worker.

A tal fine, aggiungi il seguente codice a service-worker.js, che registrerà i messaggi nella console DevTools in risposta a vari eventi (ma non farà 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 pubblicata del progetto di esempio e osservare il servizio worker in azione.

• Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero .
• Premi "Control+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 worker del servizio è stato installato e attivato:

Poi, vai alla scheda Applicazioni e seleziona il riquadro Service worker. Dovresti visualizzare un messaggio simile al seguente:

Questo ti informa che esiste un worker di servizio con un URL di origine service-worker.js per l'app web solar-donkey.glitch.me che è attualmente attivato ed eseguito. Ti dice anche che al momento è presente un client (scheda aperta) controllato dal service worker.

Puoi utilizzare i link in questo riquadro, ad esempio Unregister o stop, per apportare modifiche al servizio worker attualmente registrato a scopo di debug.

Attivare il flusso di aggiornamento del worker di servizio

Uno dei concetti chiave da comprendere durante lo sviluppo con i worker di servizio è l'idea di un flusso di aggiornamento.

Dopo che gli utenti hanno visitato un'app web che registra un service worker, visualizzano il codice della copia corrente di service-worker.js installata sul browser locale. Ma cosa succede quando apporti aggiornamenti alla versione di service-worker.js archiviata sul tuo server web?

Quando un visitatore abituale torna a un URL che rientra nell'ambito di un worker di servizio, il browser richiede automaticamente l'ultima service-worker.js e controlla se sono presenti modifiche. Se qualcosa nello script del worker del servizio è diverso, il nuovo worker del servizio avrà la possibilità di installarsi, attivarsi e, infine, prendere il controllo.

Puoi simulare questo flusso di aggiornamento tornando all'editor di codice del progetto e apportando qualsiasi modifica al codice. Una modifica rapida potrebbe essere sostituire

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 attiva dell'app di esempio e carica di nuovo la pagina con la scheda Applicazione di DevTools ancora aperta. Dovresti vedere quanto segue:

Ciò indica che in questo momento sono installate due versioni del tuo service worker. La versione precedente, già attivata, è in esecuzione e controlla la pagina corrente. La versione aggiornata del servizio worker è elencata subito di seguito. È nello stato waiting e rimarrà in attesa finché non saranno chiuse tutte le schede aperte controllate dall' vecchio worker di servizio.

Questo comportamento predefinito garantisce che, se il nuovo worker di servizio presenta un comportamento fondamentalmente diverso da quello del vecchio, ad esempio un gestore fetch che risponde con risorse incompatibili con le versioni precedenti della tua app web, non entrerà in vigore finché un utente non avrà chiuso tutte le istanze precedenti della tua app web.

Riepilogo

Ora dovresti avere familiarità con la procedura di registrazione di un worker di servizio e con l'osservazione del suo comportamento utilizzando DevTools di Chrome.

Ora sei in una buona posizione per iniziare a implementare strategie di memorizzazione nella cache e tutte le funzionalità utili per caricare la tua app web in modo affidabile e rapido.