Gli utenti si aspettano che le app vengano avviate in modo affidabile in caso di connessioni di rete lente o instabili o anche offline. Si aspettano che i contenuti con cui ha interagito più di recente, ad esempio 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 riuscire o avere un arresto anomalo in silenzio. E vogliono che tutto questo avvenga rapidamente. Come puoi vedere in i millisecondi fanno milioni, anche un miglioramento di 0,1 secondi dei tempi di caricamento può migliorare le conversioni fino al 10%. I service worker sono lo strumento che consente alla tua applicazione web progressiva (PWA) di soddisfare le aspettative degli utenti.
Quando un'app richiede una risorsa coperta dall'ambito del service worker, quest'ultimo intercetta la richiesta e agisce come proxy di rete, anche se l'utente è offline. Può quindi decidere se deve gestire la risorsa dalla cache utilizzando l'API Cache Storage, gestirla dalla rete come se non ci fosse alcun service worker attivo oppure crearla da un algoritmo locale. In questo modo puoi fornire un'esperienza di alta qualità come quella di un'app della piattaforma, anche quando la tua app è offline.
Registra 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 apre la PWA, tutte le sue 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. Dopo il caricamento, il service worker si configura 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):
- Apri gli Strumenti per sviluppatori e fai clic sulla scheda Applicazione.
- Nel riquadro a sinistra, seleziona Service worker.
- Verifica che l'URL dello script del service worker sia associato allo stato "Attivato". Per ulteriori informazioni, vedi Ciclo di vita. Su Firefox, lo stato può essere "In esecuzione" o "Arrestato".
In Safari:
- Fai clic su Develop > Service Worker.
- Controlla in questo menu una voce con l'origine corrente. Se fai clic su questa voce si apre una finestra di controllo sul contesto del service worker.
Ambito
L'ambito è determinato dalla cartella in cui si trova il service worker. Un service worker
che risiede in example.com/my-pwa/sw.js può controllare qualsiasi navigazione in corrispondenza o sotto
il percorso my-pwa, ad esempio example.com/my-pwa/demos/. I service worker possono controllare solo gli elementi (pagine, worker, collettivamente "client") nel loro ambito.
Questo ambito si applica alle schede del browser e alle finestre PWA.
È consentito un solo Service worker per ambito. Quando un service worker è attivo e in esecuzione, in genere è disponibile una sola istanza, indipendentemente dal numero di client (finestre PWA o schede del browser) in memoria.
Safari ha una gestione più complessa degli ambiti, nota come partizioni, che influisce sul funzionamento degli ambiti con gli iframe interdominio. Per scoprire di più sull'implementazione di WebKit, consulta il post del blog.
Lifecycle
I service worker hanno un ciclo di vita che determina la modalità di installazione, separatamente dall'installazione della PWA.
Il ciclo di vita del service worker inizia con la registrazione del service worker. Il browser prova quindi a scaricare e analizzare il file del service worker. Se l'analisi ha esito positivo, viene attivato l'evento install del service worker. 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 deve essere attivato prima di poter controllare i propri client, inclusa la PWA. Quando il service worker è pronto a controllare i propri client, si attiva l'evento activate. Tuttavia, per impostazione predefinita, un service worker attivato non può gestire la pagina in cui l'ha registrato fino alla successiva visita di quella pagina ricaricando la pagina o riaprendo la 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");
});
Aggiorna un service worker
I service worker vengono aggiornati quando il browser rileva che il service worker che controlla il client e la nuova versione del file del service worker nel server sono diversi in termini di byte.
Dopo l'installazione, il nuovo service worker attende l'attivazione finché il service worker precedente non controlla più alcun client. Questo stato è detto "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 di prendere il controllo. L'utente deve chiudere o uscire da tutte le schede e le finestre utilizzando il service worker attuale e poi tornare indietro per concedere il controllo al nuovo service worker. Per ulteriori informazioni, consulta Il ciclo di vita dei service worker.
Durata del service worker
Un service worker installato e registrato può gestire tutte le richieste di rete all'interno del suo ambito. Viene eseguito sul proprio thread, con attivazione e terminazione controllate dal browser, che gli consentono di funzionare anche prima che la PWA sia aperta o dopo la chiusura. I service worker vengono eseguiti sul proprio thread, ma lo stato in memoria potrebbe non rimanere 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 altro spazio di archiviazione permanente.
Se non è già in esecuzione, un service worker si avvia ogni volta che viene inviata una richiesta di rete nel suo ambito o quando riceve un evento di attivazione come una sincronizzazione periodica in background o un messaggio push.
I service worker vengono arrestati se sono rimasti inattivi per alcuni secondi o se sono stati occupati troppo a lungo. Le tempistiche variano a seconda del browser. Se un service worker è stato arrestato e si verifica un evento che lo ha avviato, il worker viene riavviato.
Funzionalità
Un service worker registrato e attivo utilizza un thread con un ciclo di vita di esecuzione completamente diverso dal thread principale della PWA. Tuttavia, per impostazione predefinita, il file dei service worker non ha alcun comportamento. Non memorizza nella cache né gestirà alcuna risorsa; si tratta di ciò che deve fare il tuo codice. Troverai informazioni su come farlo nei capitoli seguenti.
Le funzionalità dei service worker non riguardano solo il proxy o le richieste HTTP. Oltre ad altre funzionalità, sono disponibili altre funzionalità per altri scopi, come esecuzione di codice in background, notifiche push web ed elaborazione di pagamenti. Parleremo di queste aggiunte in Funzionalità.