Collaborare con i Service worker

Jeff Posnick

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Nota: questo codelab utilizza Chrome DevTools. Scarica Chrome se non l'hai ancora fatto.

Questo codelab mostra come registrare un worker di servizio 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 potrebbero esserti utili durante 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.js all'inizio è vuoto, ma conterrà il codice utilizzato per registrare il service worker. È già in fase di caricamento tramite <script> all'interno del tag index.html del 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 registrato per prima cosa. Puoi farlo chiamando:

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

all'interno del file register-sw.js.

Prima di aggiungere il codice, però, è necessario considerare un paio di punti .

Innanzitutto, non tutti i browser supporta Service worker. Questo vale in modo particolare per le versioni precedenti dei browser che non si aggiornano automaticamente. Quindi è buona norma chiamare navigator.serviceWorker.register() in modo condizionale, dopo aver controllato se navigator.serviceWorker è supportato.

In secondo luogo, quando registri un service worker, il browser esegue il codice nel tuo service-worker.js file e potrebbero iniziare a scaricare gli URL da compilare cache, a seconda del codice nel Service worker install e activate e gestori di eventi.

L'esecuzione di codice aggiuntivo e il download di asset possono utilizzare risorse preziose che il browser potrebbe altrimenti utilizzare per visualizzare lo stato pagina web. Per evitare questa interferenza, è buona norma ritardare registrando un service worker finché il browser non ha terminato il rendering pagina corrente. Un modo pratico per approssimare questo valore è attendere l'evento window.load.

Nota: in attesa del giorno window.load è una soluzione universale. Se sai di più su come la tua pagina web carica le risorse o se utilizzi un framework dell'app web che supporta il proprio "tutto è pronto" un evento del ciclo di vita, puoi modificare le tempistiche di conseguenza.

Combinando questi due punti, aggiungi questo service worker per uso generico codice di registrazione al tuo 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 vari eventi del service worker e di acquisire dimestichezza con gli strumenti 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à messaggi alla 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 a register-sw.js e service-worker.js file, è 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 premi 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 mostra 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 della presenza di un service worker con URL di origine service-worker.js, per l'app web solar-donkey.glitch.me, è attualmente sia attivato e in esecuzione. Ti dice anche che al momento è presente un client (scheda aperta) controllato dal service worker.

Puoi usare i link in questo riquadro, come Unregister o stop, per apportare modifiche al service worker attualmente registrato per scopi di debug.

Nota: i Service worker tendono a restare, a meno che non siano esplicitamente non registrati. Se hai voglia di "ricominciare da zero" durante lo sviluppo locale, un ottimo modo per farlo è utilizzare una finestra di navigazione in incognito di Chrome per caricare le pagine sotto il controllo dei service worker. Il service worker rimane valido solo finché la finestra è aperta e puoi sempre ricominciare chiudendo tutte le finestre di navigazione in incognito e aprendone una nuova.

Attiva il flusso di aggiornamento del service worker

Uno dei concetti chiave da capire 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, termineranno con il codice della copia attuale di service-worker.js installata sul suo browser locale. Ma cosa succede quando aggiorni la versione service-worker.js archiviato 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 service worker è diverso, il nuovo service worker avrà la possibilità di installare, attivare per poi assumere 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 live dell'app di esempio e ricarica la pagina con la scheda Applicazione DevTools ancora aperta. Dovresti vedere quanto segue:

Questo mostra che in questo cluster sono installate due versioni del service worker punto di accesso. La versione precedente, che era già attivata, è in esecuzione e in della pagina corrente. Viene elencata la versione aggiornata del service worker sotto. È nella waiting, e attenderà finché tutte le schede aperte controllate dal i vecchi Service worker sono chiusi.

Questo comportamento predefinito assicura che, se il nuovo il Service worker presenta una differenza fondamentale nel comportamento di quello precedente, ad esempio Gestore fetch che risponde con risorse incompatibili con le versioni precedenti delle tue app web, non avranno effetto finché un utente non avrà arrestato le istanze precedenti della tua app web.

Nota: se non vuoi attendere, è possibile chiamare skipWaiting() all'interno del tuo service worker (di solito nel gestore install) o simulare questo comportamento facendo clic sul link skipWaiting in DevTools.

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 grado di iniziare a implementare strategie di memorizzazione nella cache e i componenti utili che aiuteranno la tua applicazione web a caricarsi in modo affidabile e affidabile rapidamente.