Due API svolgono un ruolo fondamentale nella creazione di app web affidabili: Addetto ai servizi e Archiviazione cache. Ma usarle in modo efficace, senza introdurre piccoli bug o imbattersi in ostacoli di questi casi può essere una sfida. Ad esempio, gli errori nel codice del service worker possono causare problemi di memorizzazione nella cache; gli utenti potrebbero visualizzare contenuti non aggiornati o non funzionare .
Workbox è un servizio di toolkit per i service worker basato sul service worker e sullo spazio di archiviazione della cache su quelle di livello inferiore. Fornisce un set di librerie pronte per la produzione per aggiungere il supporto offline a app web. Il toolkit è strutturato in due raccolte: strumenti che aiutano a gestire che viene eseguito all'interno del Service worker e gli strumenti che si integrano un processo di compilazione.
Codice di runtime
Si tratta del codice che viene eseguito all'interno dello script del service worker e che controlla come intercetta le richieste in uscita e interagisce con l'API Cache Storage. Workbox ha un una dozzina di moduli della biblioteca in totale, che gestiscono una varietà di casi d'uso specializzati. I moduli più importanti determinare se il service worker risponderà (azione nota come routing), e come risponderà (azione nota come strategia di memorizzazione nella cache).
Integrazione build
Offerte Workbox riga di comando, Modulo Node.js, e plug-in webpack strumenti che offrono modi alternativi per raggiungere due obiettivi:
- Crea uno script del service worker basato su un insieme di configurazione le opzioni di CPU e memoria disponibili. Il service worker generato utilizza le librerie di runtime di Workbox "dietro le quinte" per mettere in azione le strategie di memorizzazione nella cache che configuri.
- Genera un elenco di URL che dovrebbero essere "prememorizzati nella cache", in base a pattern configurabili per includere ed escludere i file generati durante il processo di creazione.
Perché dovresti usare Workbox?
L'uso di Workbox durante la creazione del service worker è facoltativo, ci sono vari di guide che illustrano la strategie di memorizzazione nella cache più comuni da una "vaniglia" del Service worker. Se decidi di utilizzare Workbox, ecco alcuni dei suoi vantaggi.
Gestione della cache
Workbox gestisce gli aggiornamenti della cache per te, legati al tuo processo di compilazione pre-memorizzazione nella cache o tramite criteri dimensioni/età configurabili quando si usa il runtime per la memorizzazione nella cache. L'API Cache Storage sottostante è potente, ma non dispone il supporto integrato per la scadenza della cache. Strumenti come Workbox colmano questa lacuna.
Logging e report completi sugli errori
Quando inizi a utilizzare i service worker, capire il perché qualcosa
viene memorizzato nella cache (o, altrettanto frustrante, perché non è presente nella cache) può essere difficile.
Workbox rileva automaticamente quando è in esecuzione una versione di sviluppo del
su localhost e attiva il logging di debug nel codice JavaScript del browser
Google Cloud.
Seguendo i messaggi di log, puoi arrivare alla radice di qualsiasi di configurazione o invalidazione molto più rapidamente rispetto a quando da solo.
Un codebase collaudato tra browser
Workbox è sviluppato a fronte di una suite di test cross-browser e, ove possibile, torna automaticamente alle implementazioni alternative delle funzionalità che non è presente in alcuni browser.
- La
workbox-broadcast-cache-update moduleutilizza API Broadcast Channel se disponibile, per poi tornare In base apostMessage()sui browser che non li supportano. - La modulo workbox-background-sync utilizza API Background Sync se possibile. In caso contrario, torna a ripetere gli eventi in coda ogni volta del Service worker.
Come dovresti usare Workbox?
Integrazione del framework
Se stai iniziando un nuovo progetto da zero, puoi usufruire dei Integrazione della workstation presente in molti starter kit e plug-in aggiuntivi popolari:
Aggiungi Workbox al processo di compilazione esistente
Se hai già implementato un processo di creazione del sito, inserisci appropriata riga di comando, Modulo Node.js, o plug-in webpack potrebbe essere tutto quello di cui hai bisogno per iniziare a utilizzare Workbox.
In particolare, l'interfaccia a riga di comando di Workbox consente di
in esecuzione, con una modalità wizard che controllerà il tuo sviluppo locale
e suggerire 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 tuo service worker, esegui workbox generateSW workbox-config.js
come parte di un processo di compilazione. Per informazioni dettagliate, consulta la documentazione di generateSW.
Puoi personalizzare ulteriormente il service worker apportando modifiche a workbox-config.js.
Per informazioni dettagliate, consulta la documentazione delle opzioni.
Usa Workbox in fase di runtime in un service worker esistente
Se hai già un service worker e vuoi provare il runtime di Workbox biblioteche importare Workbox dalla rete CDN ufficiale e iniziare subito a usarla per la memorizzazione nella cache di runtime. Questo utilizzo in questo caso non potrai sfruttare la pre-memorizzazione nella cache (che richiede un'integrazione in fase di creazione), ma è ideale per la prototipazione e diverse strategie di memorizzazione nella cache in tempo reale.
// 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',
})
);