Gli utenti si aspettano che le app si avviino in modo affidabile su connessioni di rete lente o instabili oppure anche offline. Si aspettano quali contenuti ha interagito più di recente, come tracce multimediali o biglietti e itinerari, affinché siano disponibili e utilizzabili. Quando non è possibile effettuare una richiesta, il cliente si aspetta che sia l'app a farlo, invece di che si arrestano in modo automatico o si arresta in modo anomalo. 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ò far aumentare le conversioni fino al 10%. I service worker sono lo strumento che consente alla tua app web progressiva (PWA) di essere all'altezza dei tuoi utenti le aspettative.
Quando un'app richiede una risorsa coperta dall'ambito del service worker, il service worker intercetta la richiesta e agisce come proxy di rete, anche se utente è offline. Può quindi decidere se deve fornire la risorsa utilizzando l'API Cache Storage, e distribuirla dalla rete come se non esistessero service worker attivo o crearlo da un algoritmo locale. Questo consente di offrono un'esperienza di alta qualità come quella di un'app della piattaforma, anche quando l'app è offline.
Registra un service worker
Prima che un service worker assuma il controllo della tua pagina, è necessario registrarla per della tua PWA. Ciò significa che, la prima volta che un utente apre la tua PWA, tutta la sua rete vengono indirizzate direttamente al tuo server perché il service worker non ha delle tue pagine.
Dopo aver verificato se il browser supporta l'API Service Worker, la PWA può registrare un service worker. Al termine del caricamento, il service worker si configura tra la PWA e la rete, intercettando le richieste e gestendo 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 poi fai clic sulla scheda Applicazione.
- Nel riquadro a sinistra, seleziona Service worker.
- Verifica che l'URL dello script del service worker sia visualizzato con lo stato "Attivato". Per ulteriori informazioni, vedi Ciclo di vita. In Firefox, lo stato può essere "In esecuzione" o "Arrestato".
In Safari:
- Fai clic su Sviluppa > Service worker.
- In questo menu è presente una voce con l'origine attuale. Facendo clic sulla voce corrispondente apre una finestra di ispezione sul contesto del service worker.
Ambito
La cartella in cui si trova il service worker ne determina l'ambito. Un service worker
che si trova all'indirizzo example.com/my-pwa/sw.js può controllare qualsiasi navigazione pari o inferiore a
il percorso my-pwa, ad esempio example.com/my-pwa/demos/. I Service worker possono
controllare solo gli elementi (pagine, worker, collettivamente "clienti") nel loro ambito.
Questo ambito si applica alle schede del browser e alle finestre PWA.
È consentito solo un service worker per ambito. Quando è attivo un service worker e in esecuzione, in genere è disponibile una sola istanza, indipendentemente dal numero di client (finestre PWA o schede del browser) sono in memoria.
Safari prevede una gestione degli ambiti più complessa, nota come partizioni, che influisce sul modo funzionano con gli iframe interdominio. Per scoprire di più su WebKit sull'implementazione, consulta il post del blog.
Lifecycle
I Service worker hanno un ciclo di vita che ne determina la modalità di installazione, separatamente dell'installazione della PWA.
Il ciclo di vita del service worker inizia con la registrazione del service worker. La
browser tenta di scaricare e analizzare il file del service worker. Se esegui l'analisi
ha esito positivo, viene attivato l'evento install del service worker. L'evento install
si attiva 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 su piattaforme che non supportano l'installazione di PWA, come Safari e Firefox sui computer.
Dopo l'installazione, è necessario attivare il service worker prima di poter
controllare i propri clienti, inclusa la tua PWA. Quando il service worker è pronto per
controllare i propri client, viene attivato l'evento activate. Tuttavia, per impostazione predefinita,
il service worker attivato non può gestire la pagina in cui è stato registrato fino al
volta che passi a quella pagina ricaricandola o riaprendo la PWA.
Puoi rimanere in ascolto degli eventi nell'ambito globale del service worker utilizzando l'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 il client e la nuova versione del file dei service worker dall'account sono diversi dai byte.
Dopo una corretta installazione, il nuovo service worker attende l'attivazione fino a quando il Service worker precedente non controlla più alcun client. Questo stato prende il nome "in attesa" ed è il modo in cui il browser garantisce che solo una versione il service worker è in esecuzione in un momento specifico.
L'aggiornamento di una pagina o la riapertura della PWA non imposteranno il nuovo service worker controllo. L'utente deve chiudere o uscire da tutte le schede e finestre utilizzando quello attuale, quindi torna indietro per dare al nuovo service worker controllo. Per saperne di più, consulta Il ciclo di vita del service worker.
Durata dei service worker
Un service worker installato e registrato può gestire tutte le richieste di rete nel suo ambito. Viene eseguito sul proprio thread, con attivazione e chiusura controllata dal browser, che ne consente il funzionamento anche prima che la PWA sia aperta o dopo la chiusura. I Service worker vengono eseguiti sul proprio thread, ma in stato in memoria potrebbero non essere persistenti tra le esecuzioni di un service worker, quindi assicurati che da riutilizzare per ogni esecuzione è disponibile in IndexedDB o in l'archiviazione permanente dei dati.
Se non è già in esecuzione, un service worker viene avviato ogni volta che viene inviata una richiesta di rete viene inviato nel suo ambito o quando riceve un evento di attivazione come un evento una sincronizzazione in background o un messaggio push.
I Service worker vengono terminati se sono rimasti inattivi per alcuni secondi o se sono stati impegnati troppo a lungo. I tempi variano da browser a browser. Se il service worker è stato terminato e si verifica un evento che lo avvia, si riavvia.
Funzionalità
Un service worker registrato e attivo utilizza un thread con un indirizzo completamente diverso del ciclo di vita dell'esecuzione dal thread principale della PWA. Tuttavia, per impostazione predefinita, e il file del service worker di per sé non ha alcun comportamento. Non memorizza nella cache e non pubblica alcun le risorse; ecco cosa deve fare il tuo codice. Scoprirai come nel i successivi capitoli.
Le funzionalità del Service worker non riguardano solo il proxy o la gestione delle richieste HTTP. Altre funzionalità sono disponibili per altri scopi, come lo sfondo esecuzione di codice, notifiche push web ed elaborazione dei pagamenti. Parleremo queste aggiunte in Funzionalità.