Due API svolgono un ruolo fondamentale nella creazione di app web affidabili: Service Worker e Cache Storage. Ma usarli in modo efficace, senza introdurre bug impercettibili o affrontare 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 per i 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 creazione.
Codice di runtime
Questo è il codice che viene eseguito all'interno dello script del service worker e che controlla in che modo intercetta le richieste in uscita e interagisce con l'API Cache Storage. Workbox ha una decisione di moduli libreria in totale, ognuno dei quali gestisce una varietà di casi d'uso specializzati. I moduli più importanti determinano se il service worker risponderà (nota come routing) e come risponderà (nota come strategia di memorizzazione nella cache).
Crea integrazione
Workbox offre strumenti a riga di comando, modulo Node.js e plug-in webpack che forniscono modi alternativi per eseguire due cose:
- Crea uno script del service worker basato su un insieme di opzioni di configurazione. Il service worker generato utilizza le librerie di runtime di Workbox "under the hood" per mettere in azione le strategie di memorizzazione nella cache che configuri.
- Genera un elenco di URL da "pre-memorizzare nella cache" in base a pattern configurabili per includere ed escludere i file generati durante il processo di compilazione.
Perché dovresti utilizzare Workbox?
L'utilizzo di Workbox per la creazione del service worker è facoltativo: sono disponibili diverse guide che illustrano le strategie di memorizzazione nella cache comuni dal punto di vista dei service worker "vanilla". Se decidi di usare Workbox, ecco alcuni dei suoi vantaggi.
Gestione della cache
Workbox gestisce automaticamente gli aggiornamenti della cache, associati al processo di compilazione durante l'uso della pre-memorizzazione nella cache o mediante criteri configurabili di dimensioni/età quando viene utilizzata la memorizzazione nella cache di runtime. L'API sottostante Cache Storage è potente, ma non supporta alcun supporto integrato per la scadenza della cache. Strumenti come Workbox colmano questa lacuna.
Registrazione approfondita e segnalazione degli errori
Quando si inizia a lavorare con i service worker, capire perché qualcosa viene memorizzato nella cache (o, altrettanto frustrante, perché non è nella cache) è una sfida.
Workbox rileva automaticamente quando esegui 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 arrivare alla radice di qualsiasi problema di configurazione o invalidazione molto più rapidamente rispetto a quanto accadrebbe se stessi.
Un codebase testato su più browser
Workbox è stato sviluppato in una suite di test tra browser e, quando possibile, esegue automaticamente il ripristino automatico di implementazioni alternative di funzionalità che non sono disponibili in alcuni browser.
workbox-broadcast-cache-update moduleutilizza l'API Broadcast Channel, se disponibile, e utilizza un'implementazione basata supostMessage()sui browser che non lo supportano.- Il modulo workbox-background-sync utilizza l'API Background Sync, se possibile. In caso contrario, torna a ripetere gli eventi in coda a ogni avvio del service worker.
Come dovresti usare Workbox?
Integrazione del framework
Se inizi un nuovo progetto da zero, puoi sfruttare l'integrazione Workbox disponibile in molti starter kit e plug-in aggiuntivi tra i più diffusi:
Aggiungi Workbox al processo di compilazione esistente
Se hai già impostato un processo di creazione per il tuo sito, potrebbe bastare la riga di comando appropriata, il modulo Node.js o lo strumento plug-in webpack per iniziare a utilizzare Workbox.
In particolare, l'interfaccia a riga di comando di Workbox semplifica l'operatività, presenta una modalità wizard che controllerà l'ambiente di sviluppo locale e suggerirà una configurazione predefinita ragionevole da 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
come parte del processo di compilazione. Per informazioni dettagliate, consulta la documentazione di generateSW.
Puoi personalizzare ulteriormente il service worker apportando modifiche a workbox-config.js.
Per ulteriori dettagli, consulta la documentazione delle opzioni.
Utilizzo di 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 all'istante.
// 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',
})
);