Nel mondo dei framework front-end si parla spesso di service workers. Sono utilizzati all’interno di applicazioni offline offrendo diversi scenari di funzionamento.
Spesso vengono utilizzati all’interno di servizi che mettono a disposizione notifiche push e sincronizzazioni in background.
Inoltre, fanno in modo che la rete non sia un collo di bottiglia per servire nuove richieste.
I service workers sono degli script che vengono eseguiti dal browser e non hanno un collegamento diretto con il DOM. Vengono infatti eseguiti all’interno di un contesto globale, che li isola dalle pagine del DOM.
Esiste un metodo indiretto per accedere al contenuto della pagine, che viene gestito tramite l’interfaccia postMessage.
Non essendo legati ad una particolare pagina, possono essere riutilizzati.
Alcuni vantaggi dell’utilizzo dei service workers sono:
- aumento delle prestazioni web: aumentando il fenomeno di caching, consentono al sito di caricarsi piu velocemente
- nello sviluppo di applicazioni offline, anche se la connettività viene persa, il programma può funzionare lo stesso
- consentono le notifiche push che la tecnologia web standard non consente
- permettono di effetturare operazioni di sincronizzazione in background
Particolarmente interessante è che un service worker ha un ciclo di vita che non è correlato a quell’applicazione web.
Javascript consente l’installazione del service worker, ed una volta terminata si passa direttamente al processo di attivazione.
Nel caso di service workers in React il ciclo di vita viene gestito direttamente da React stesso, che rende il processo semplice per lo sviluppo e per l’installazione.
Per quanto riguarda lo sviluppo, è importante sapere che i service workers lavorano solo con il protocollo HTTPS, ad eccezzione dello sviluppo a localhost.
Il comportamento di un service worker è legato agli eventi. Questo significa che una volta terminati non è possibile mantenere alcuna informazione. E’ possibile accedere agli stati precedenti utilizzando IndexDB.
A questo punto analizziamo come sia possibile utilizzare un service workers all’interno di un applicazione React.
Per poter creare un applicazione e sfrutture il template, possiamo usare:
npx create-react-app my-app --template cra-template-pwa
che consente di creare un’applicazione basata sul template standard di react, con il file serviceWorker.js nella src del progetto.
Prima di poter utilizzare il service workers appena creato, è necessario prima registrarlo.
Per effettuare la registrazione è necessario editare il file index.js, cercando al suo interno la voce
serviceWorker.unregister();
modificandolo in:
serviceWorker.register();
Per impostazione predefinita il worker services viene attivato solo all’interno dell’ambiente di produzione: all’interno del file serviceWorker.js troviamo infatti la configurazione:
process.env.NODE_ENV === 'production'
Durante la fase di sviluppo possiamo, quindi, disabilitare tale configuraizione.
Per poter aggiungere funzionalità custom al service worker è necessario creare un nuovo file, ad esempio chiamato custom-service-worker.js e modificare la funzione register() all’interno di serviceWorker.js in modo da includere il caricamento del nuovo file, nel modo seguente :
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/custom-service-worker.js`;
...
}A questo punto è possibile procedere con la scrittura del nostro service worker custom.
Nei prossimi post vedremo come procedere.