Ti sei mai chiesto come alcuni siti web sembrano continuare a funzionare anche quando sei offline? Il segreto è semplice: questi siti Web hanno addetti ai servizi.

I service worker sono la tecnologia chiave alla base di molte delle funzionalità native simili alle app delle moderne applicazioni Web.

Cosa sono i lavoratori dei servizi?

I lavoratori dei servizi sono un tipo specializzato di JavaScript web worker. Un service worker è un file JavaScript che funziona un po' come un server proxy. Cattura le richieste di rete in uscita dalla tua applicazione, permettendoti di creare risposte personalizzate. Ad esempio, potresti fornire file memorizzati nella cache all'utente quando è offline.

I service worker ti consentono anche di aggiungere funzionalità come la sincronizzazione in background alle tue applicazioni web.

Perché i lavoratori dei servizi?

Gli sviluppatori Web hanno cercato di espandere le capacità delle loro app per molto tempo. Prima che arrivassero gli addetti all'assistenza, era possibile utilizzare varie soluzioni per renderlo possibile. Uno particolarmente degno di nota è stato AppCache, che ha reso convenienti le risorse di memorizzazione nella cache. Sfortunatamente, ha avuto problemi che lo hanno reso una soluzione poco pratica per la maggior parte delle app.

instagram viewer

AppCache sembrava essere una buona idea perché ti permetteva di specificare le risorse da memorizzare nella cache molto facilmente. Tuttavia, ha fatto molte ipotesi su ciò che stavi cercando di fare e poi si è rotto in modo orribile quando la tua app non ha seguito esattamente quelle ipotesi. Leggi Jake Archibald (sfortunatamente intitolato ma ben scritto) Application Cache è un Douchebag per ulteriori dettagli. (Fonte: MDN)

I service worker sono l'attuale tentativo di ridurre i limiti delle app Web, senza gli svantaggi di tecnologie come AppCache.

Casi d'uso per i lavoratori del servizio

Quindi, cosa ti lasciano fare esattamente i lavoratori dei servizi? I service worker ti consentono di aggiungere funzionalità caratteristiche delle app native alla tua applicazione web. Possono anche fornire un'esperienza normale su dispositivi che non supportano gli operatori del servizio. A volte vengono chiamate app come questa App Web progressive (PWA).

Di seguito sono elencate alcune delle funzionalità rese possibili dai lavoratori del servizio:

  • Consentire all'utente di continuare a utilizzare l'app (o almeno parti di essa) quando non è più connesso a Internet. I lavoratori del servizio ottengono questo risultato servendo le risorse memorizzate nella cache in risposta alle richieste.
  • Nei browser basati su Chromium, un service worker è uno dei requisiti per l'installazione di un'app Web.
  • Gli operatori di servizio sono necessari affinché la tua applicazione Web sia in grado di implementare le notifiche push.

Il ciclo di vita di un addetto ai servizi

Gli operatori del servizio possono controllare le richieste per un intero sito o solo una parte delle pagine del sito. Una determinata pagina Web può avere un solo operatore di servizio attivo e tutti gli operatori di servizio hanno un ciclo di vita basato su eventi. Il ciclo di vita di un addetto ai servizi è generalmente simile al seguente:

  1. Registrazione e download del lavoratore. La vita di un addetto ai servizi inizia quando viene registrato da un file JavaScript. Se la registrazione ha esito positivo, il lavoratore del servizio viene scaricato e quindi avvia l'esecuzione all'interno di un thread speciale.
  2. Quando viene caricata una pagina controllata dall'operatore del servizio, l'operatore del servizio riceve un evento "installa". Questo è sempre il primo evento ricevuto da un lavoratore del servizio ed è possibile configurare un listener per questo evento all'interno del lavoratore. L'evento 'install' viene generalmente utilizzato per recuperare e/o memorizzare nella cache tutte le risorse necessarie al lavoratore del servizio.
  3. Al termine dell'installazione, l'operatore del servizio riceve un evento "activate". Questo evento consente al lavoratore di ripulire le risorse ridondanti utilizzate dai precedenti lavoratori del servizio. Se stai aggiornando un addetto ai servizi, l'evento di attivazione si attiverà solo quando è possibile farlo in sicurezza. Questo accade quando non ci sono pagine caricate che utilizzano ancora la vecchia versione di Service worker.
  4. Dopodiché, l'operatore del servizio ha il pieno controllo di tutte le pagine che sono state caricate dopo che è stata registrata con successo.
  5. L'ultima fase del ciclo di vita è la ridondanza, che si verifica quando il service worker viene rimosso o sostituito da una versione più recente.

Come utilizzare Service Workers in JavaScript

L'API Service Worker (MDN) fornisce l'interfaccia che consente di creare e interagire con gli operatori del servizio in JavaScript.

I service worker si occupano principalmente delle richieste di rete e di altri eventi asincroni. Di conseguenza, l'API del lavoratore del servizio fa un uso massiccio Promesse e programmazione asincrona.

Per creare un addetto ai servizi, la prima cosa che devi fare è chiamare il navigator.serviceWorker.register() metodo. Ecco come potrebbe essere:

Se ('ServiceWorker' nel navigatore) {
 navigator.serviceWorker.register('/sw.js').then(funzione(registrazione){
 console.log('Registrazione del lavoratore del servizio riuscita:', registrazione);
 }).catch((errore) => { console.log('Registrazione del lavoratore del servizio non riuscita:', errore); });
} altro {
 console.log('Gli operatori di servizio non sono supportati.');
}

Il blocco if più esterno esegue il rilevamento delle funzionalità. Garantisce che il codice relativo ai service worker venga eseguito solo su browser che supportano i service worker.

Successivamente, il codice chiama il Registrati metodo. Passa il percorso all'operatore del servizio (relativo all'origine del sito) per registrarlo e scaricarlo. Il Registrati accetta anche un parametro facoltativo chiamato scope, che può essere utilizzato per limitare le pagine controllate dal lavoratore. Gli operatori del servizio controllano tutte le pagine di un'applicazione per impostazione predefinita. Il Registrati restituisce un Promise che indica se la registrazione è andata a buon fine.

Se la promessa si risolve, il lavoratore del servizio si è registrato correttamente. Il codice quindi stampa sulla console un oggetto che rappresenta il lavoratore del servizio registrato.

Se il processo di registrazione non riesce, il codice rileva l'errore e lo registra nella console.

Quindi, ecco un esempio semplificato di come potrebbe apparire l'operatore del servizio stesso:

self.addEventListener('installare', (evento) => {
 event.waitUntil(nuovoPromettere((risolvere, rifiutare) => {
 console.log("facendo cose di configurazione")
 risolvere()
 }))
 console.log("L'operatore di servizio ha terminato l'installazione")
})
self.addEventListener('attivare', (evento) => {
 event.waitUntil(nuovoPromettere((risolvere, rifiutare) => {
 console.log("fare cose di pulizia!")
 risolvere()
 }))
 console.log('attivazione effettuata!')
})
self.addEventListener('andare a prendere', (evento) => {
 console.log("Richiesta intercettata", evento)
});

Questo lavoratore del servizio demo ha tre listener di eventi, registrati contro se stesso. Ne ha uno per l'evento 'installa', l'evento 'attiva' e l'evento 'recupero'.

All'interno dei primi due listener, il codice utilizza il aspetta fino metodo. Questo metodo accetta una Promessa. Il suo compito è assicurarsi che l'operatore del servizio attenda che la Promessa venga risolta o rifiutata prima di passare all'evento successivo.

Il listener di recupero si attiva ogni volta che viene effettuata una richiesta per una risorsa controllata dal lavoratore del servizio.

Le risorse controllate da un addetto al servizio includono tutte le pagine che controlla, nonché tutte le risorse a cui si fa riferimento in tali pagine.

Migliora le tue app Web con gli addetti ai servizi

I service worker sono un tipo speciale di web worker che ha uno scopo unico. Si siedono davanti alle richieste di rete per abilitare funzionalità come l'accesso alle app offline. L'utilizzo dei service worker in un'applicazione Web può migliorare notevolmente la sua esperienza utente. Puoi creare service worker e interagire con loro utilizzando l'API Service worker.