Service worker

Gli utenti si aspettano che le app si avviino con connessioni di rete lente o instabili, o anche quando sono offline. Si aspettano che i contenuti con cui ha interagito più di recente, come tracce multimediali o biglietti e itinerari, siano disponibili e utilizzabili. Quando una richiesta non è possibile, si aspettano che l'app lo comunichi invece di non avere errori o arresti anomali in modo invisibile. E gli utenti vogliono farlo rapidamente. Come vediamo in questo studio, i millisecondi fanno milioni, anche un miglioramento di 0,1 secondi dei tempi di caricamento può migliorare le conversioni anche del 10%. In sintesi: gli utenti si aspettano che le PWA siano affidabili ed è per questo che disponiamo di service worker.

Ciao service worker

Un service worker come proxy middleware, in esecuzione sul lato dispositivo, tra la PWA e i server, che includono sia i tuoi server sia i server interdominio.

Quando un'app richiede una risorsa coperta dall'ambito del service worker, anche quando un utente è offline, il service worker intercetta la richiesta agendo come proxy di rete. Può quindi decidere se gestire la risorsa dalla cache tramite l'API Cache Storage, dalla rete come accadrebbe normalmente senza un service worker, oppure crearla da un algoritmo locale. In questo modo puoi offrire un'esperienza simile a quella offerta da un'app della piattaforma. Può anche funzionare completamente offline.

Registrazione di un service worker

Prima che un service worker assuma il controllo della tua pagina, sia registrato per la PWA. Ciò significa che la prima volta che un utente accede alla tua PWA, le richieste di rete verranno inviate direttamente al tuo server perché il service worker non ha ancora il controllo delle tue pagine.

Dopo aver verificato se il browser supporta l'API Service Worker, la PWA può registrare un service worker. Una volta caricato, il service worker configura il negozio tra la PWA e la rete, intercettando le richieste e pubblicando le risposte corrispondenti.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}

Verificare se un service worker è registrato

Per verificare se un service worker è registrato, utilizza gli strumenti per sviluppatori nel tuo browser preferito.

Nei browser basati su Firefox e Chromium (Microsoft Edge, Google Chrome o Samsung Internet):

  1. Apri gli Strumenti per sviluppatori e fai clic sulla scheda Applicazione.
  2. Nel riquadro a sinistra, seleziona Service worker.
  3. Verifica che l'URL dello script del service worker sia visualizzato con lo stato "Attivato". Il significato di questo stato viene illustrato nella sezione Ciclo di vita di questo capitolo. Su Firefox lo stato può essere "In esecuzione" o "Arrestato".

In Safari:

  1. Fai clic sul menu Sviluppo, quindi sul sottomenu Service worker.
  2. Verifica che nel sottomenu sia presente una voce con l'origine corrente. Apre un ispettore sul contesto del service worker.
Strumenti per sviluppatori dei Service worker su Chrome, Firefox e Safari.
Strumenti per sviluppatori per i service worker su Chrome, Firefox e Safari.

Ambito

L'ambito è determinato dalla cartella in cui si trova il service worker. Un service worker che risiede all'indirizzo example.com/my-pwa/sw.js può controllare qualsiasi navigazione nel percorso my-pwa o inferiore, ad esempio example.com/my-pwa/demos/. I service worker possono controllare solo gli elementi (pagine, worker, collettivamente "client") che rientrano nel loro ambito. L'ambito si applica alle schede del browser e alle finestre PWA.

È consentito un solo Service worker per ambito. Quando attivo e in esecuzione, in genere è disponibile una sola istanza, indipendentemente dal numero di client in memoria (ad esempio le finestre PWA o le schede del browser).

Safari ha una gestione più complessa dell'ambito, nota come partizioni, che influisce sul funzionamento degli ambiti se hai iframe interdominio. Per ulteriori informazioni sull'implementazione di WebKit, leggi il post del blog.

Lifecycle

I service worker hanno un ciclo di vita che determina la modalità di installazione, separato dall'installazione della PWA. Il ciclo di vita del service worker inizia con la registrazione del service worker. Il browser tenta quindi di scaricare e analizzare il file del service worker. Se l'analisi ha esito positivo, viene attivato il relativo evento install. L'evento install viene attivato una sola volta.

L'installazione dei service worker avviene in modalità invisibile, senza richiedere l'autorizzazione dell'utente, anche se l'utente non installa la PWA. L'API Service Worker è disponibile anche sulle piattaforme che non supportano l'installazione delle PWA, come Safari e Firefox sui dispositivi desktop.

Dopo l'installazione, il service worker non ha ancora il controllo dei suoi client, inclusa la tua PWA. Deve essere prima attivato. Quando il service worker è pronto a controllare i propri client, viene attivato l'evento activate. Questo non significa, tuttavia, che la pagina in cui è stato registrato il service worker verrà gestita. Per impostazione predefinita, il service worker non assumerà il controllo fino alla successiva navigazione su quella pagina, a causa del ricaricamento della pagina o della riapertura della PWA.

Puoi rimanere in ascolto per gli eventi nell'ambito globale del service worker utilizzando l'oggetto self.

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

Aggiornamento di un service worker

I service worker vengono aggiornati quando il browser rileva che il service worker che sta attualmente controllando il client e la nuova versione (dal server) dello stesso file sono diversi in termini di byte.

Dopo l'installazione, il nuovo service worker attende l'attivazione finché il service worker esistente (precedente) non controlla più alcun client. Questo stato è chiamato "in attesa" ed è il modo in cui il browser assicura che sia in esecuzione una sola versione del service worker alla volta. L'aggiornamento di una pagina o la riapertura della PWA non renderà il nuovo service worker ad assumere il controllo. L'utente deve chiudere o uscire da tutte le schede e le finestre utilizzando il service worker attuale e poi tornare indietro. Solo allora il nuovo service worker prenderà il controllo. Per ulteriori informazioni, consulta questo articolo sul ciclo di vita dei service worker.

Durata del service worker

Una volta installato e registrato, un service worker può gestire tutte le richieste di rete che rientrano nel suo ambito. Viene eseguito sul proprio thread, l'attivazione e la terminazione sono controllate dal browser. In questo modo può funzionare anche prima o dopo l'apertura della PWA. Mentre i service worker vengono eseguiti sul proprio thread, non vi è alcuna garanzia che lo stato in memoria venga mantenuto tra le esecuzioni di un service worker, quindi assicurati che tutto ciò che vuoi riutilizzare per ogni esecuzione sia disponibile in IndexedDB o in qualche altra archiviazione permanente.

Se non è già in esecuzione, un service worker si avvia ogni volta che viene chiesta una richiesta di rete nel suo ambito o quando viene ricevuto un evento di attivazione, come una sincronizzazione in background periodica o un messaggio push.

I Service worker non durano a tempo indeterminato. Le tempistiche esatte variano da un browser all'altro, ma i Service worker vengono arrestati se sono rimasti inattivi per alcuni secondi o se sono stati occupati troppo a lungo. Se un service worker è stato arrestato e si verifica un evento che lo ha avviato, il service worker viene riavviato.

Funzionalità

Con un service worker registrato e attivo, hai un thread con un ciclo di vita di esecuzione completamente diverso da quello principale della PWA. Tuttavia, per impostazione predefinita, il file del service worker in sé non ha alcun comportamento. Non memorizza nella cache né pubblicherà alcuna risorsa, poiché questa operazione deve essere eseguita dal codice. Scoprirai come nei capitoli seguenti.

Le funzionalità del service worker non riguardano solo il proxy o l'elaborazione di richieste HTTP; altre funzionalità sono disponibili oltre ad altri scopi, come l'esecuzione di codice in background, le notifiche push web ed i pagamenti di elaborazione. Parleremo di queste aggiunte nel capitolo delle funzionalità.

Risorse