Due API svolgono un ruolo fondamentale nella creazione di app web affidabili: Service Worker e Cache Storage. Tuttavia, utilizzarli in modo efficace, senza introdurre bug impercettibili o imbattersi in casi limite, può essere una sfida. Ad esempio, gli errori nel codice del service worker possono causare problemi di memorizzazione nella cache; agli utenti potrebbero essere mostrati contenuti obsoleti o link inaccessibili.
Workbox è un toolkit di service worker di alto livello basato sulle API Service Worker e Cache Storage. Fornisce un insieme di librerie pronte per la produzione per aggiungere il supporto offline alle app web. Il toolkit è strutturato in due raccolte: strumenti che aiutano a gestire il codice eseguito all'interno del service worker e strumenti che si integrano con il processo di build.
Codice di runtime
Questo è il codice che viene eseguito all'interno dello script del service worker e controlla il modo in cui intercetta le richieste in uscita e interagisce con l'API Cache Storage. Workbox ha circa una dozzina di moduli di libreria in totale, ognuno dei quali gestisce una serie di casi d'uso specializzati. I moduli più importanti determinano se il service worker risponderà (noto come routing) e come risponderà (noto come strategia di memorizzazione nella cache).
Crea integrazione
Workbox offre strumenti per la riga di comando, il modulo Node.js e il plug-in webpack che forniscono modi alternativi per eseguire due operazioni:
- Crea uno script di service worker basato su un insieme di opzioni di configurazione. Il service worker generato utilizza le librerie di runtime di Workbox "dietro le quinte" per mettere in atto le strategie di memorizzazione nella cache che configuri.
- Genera un elenco di URL che devono essere "pre-memorizzati nella cache", in base a pattern configurabili per includere ed escludere i file generati durante il processo di build.
Perché dovresti utilizzare Workbox?
L'utilizzo di Workbox durante la creazione del service worker è facoltativo. Esistono diverse guide che illustrano le strategie di memorizzazione nella cache comuni dal punto di vista di un service worker "vanilla". Se decidi di utilizzare Workbox, ecco alcuni dei suoi vantaggi.
Gestione della cache
Workbox gestisce gli aggiornamenti della cache per te, collegandoli al processo di build quando utilizzi il precaching o tramite policy di dimensioni/età configurabili quando utilizzi la memorizzazione nella cache di runtime. L'API Cache Storage sottostante è potente, ma non supporta la scadenza della cache integrata. Strumenti come Workbox colmano questa lacuna.
Logging ed Error Reporting completi
Quando inizi a utilizzare i service worker, capire perché un elemento viene memorizzato nella cache (o, altrettanto frustrante, perché non viene memorizzato nella cache) è una sfida.
Workbox rileva automaticamente quando utilizzi una versione di sviluppo del tuo sito web su localhost e attiva il logging di debug nella console JavaScript del browser.
Seguendo i messaggi di log, puoi individuare la causa principale di eventuali problemi di configurazione o annullamento della convalida molto più rapidamente rispetto a quando procedi in autonomia.
Un codebase testato e compatibile con più browser
Workbox è sviluppato su una suite di test cross-browser e, se possibile, esegue automaticamente il fallback a implementazioni alternative di funzionalità che mancano in alcuni browser.
workbox-broadcast-cache-update moduleutilizza l'API Broadcast Channel, se disponibile, e torna a un'implementazione basata supostMessage()nei browser che non la supportano.- Il modulo workbox-background-sync utilizza l'API Background Sync, se possibile, altrimenti esegue il fallback per riprovare gli eventi in coda ogni volta che il service worker viene avviato.
Come dovresti utilizzare Workbox?
Integrazione del framework
Se stai avviando un nuovo progetto da zero, puoi sfruttare l'integrazione di Workbox disponibile in molti starter kit e componenti aggiuntivi popolari:
Aggiungi Workbox al processo di build esistente
Se hai già un processo di build per il tuo sito, l'inserimento dello strumento appropriato (riga di comando, modulo Node.js o plug-in webpack) potrebbe essere tutto ciò che ti serve per iniziare a utilizzare Workbox.
In particolare, l'interfaccia a riga di comando di Workbox semplifica l'avvio e l'esecuzione, con una modalità wizard che controlla l'ambiente di sviluppo locale e suggerisce una configurazione predefinita ragionevole che potresti utilizzare in futuro:
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
Per creare il service worker, esegui workbox generateSW workbox-config.js
nell'ambito di un processo di build. Per i dettagli, consulta la documentazione di generateSW.
Puoi personalizzare ulteriormente il service worker apportando modifiche a workbox-config.js.
Per i dettagli, consulta la documentazione delle opzioni.
Utilizza Workbox in fase di runtime in un service worker esistente
Se hai già un service worker e vuoi provare le librerie di runtime di Workbox, importa Workbox dalla sua CDN ufficiale e inizia subito a utilizzarlo per la memorizzazione nella cache di runtime. Questo caso d'uso significa che non potrai sfruttare il precaching (che richiede l'integrazione in fase di build), ma è ottimo per la prototipazione e per provare diverse strategie di memorizzazione nella cache al volo.
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);