Il modulo workbox-sw offre un modo estremamente semplice per iniziare a utilizzare i moduli Workbox, semplifica il caricamento dei moduli di Workbox e offre alcuni semplici metodi di supporto.
Puoi utilizzare workbox-sw tramite la nostra rete CDN o con un insieme di file della casella di lavoro sul tuo server.
Utilizzo di Workbox SW tramite CDN
Il modo più semplice per iniziare a utilizzare questo modulo è tramite la rete CDN. Devi solo aggiungere quanto segue al service worker:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
Avrai lo spazio dei nomi workbox nel service worker che fornirà l'accesso a tutti i moduli di Workbox.
workbox.precaching.*
workbox.routing.*
etc
Quando inizi a utilizzare i moduli aggiuntivi avviene una magia.
Quando fai riferimento a un modulo per la prima volta, workbox-sw lo rileva e lo carica prima di renderlo disponibile. Puoi verificarlo nella scheda
Rete in DevTools.
Questi file verranno memorizzati nella cache dal tuo browser e li renderai disponibili per un uso futuro offline.
Utilizzo di file di Workbox locali anziché di CDN
Se non vuoi utilizzare la rete CDN, è abbastanza facile passare ai file Workbox ospitati sul tuo dominio.
L'approccio più semplice consiste nell'ottenere i file tramite il comando copyLibraries di workbox-cli e successivamente indicare a workbox-sw dove trovarli tramite l'opzione di configurazione modulePathPrefix.
Se inserisci i file in /third_party/workbox-vX.Y.Z/, li utilizzerai nel seguente modo:
importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});
Evita importazioni asincrone
In background, il caricamento dei nuovi moduli per la prima volta prevede la chiamata a
importScripts()
con il percorso del file JavaScript corrispondente (ospitato sulla rete CDN o tramite un URL locale).
In entrambi i casi viene applicata una limitazione importante: le chiamate implicite a importScripts() possono verificarsi solo all'interno del gestore install di un service worker o durante l'esecuzione iniziale sincrona dello script del service worker.
Per evitare di violare questa limitazione, una best practice consiste nel fare riferimento ai vari spazi dei nomi workbox.* al di fuori di qualsiasi gestore di eventi o funzione asincrone.
Ad esempio, il seguente codice del service worker di primo livello è consentito:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will work!
workbox.routing.registerRoute(
({request}) => request.destination === 'image',
new workbox.strategies.CacheFirst()
);
Tuttavia, il codice seguente potrebbe rappresentare un problema se non hai fatto riferimento a workbox.strategies in nessun altro punto del tuo service worker:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
// outside of the initial, synchronous service worker execution.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Se hai bisogno di scrivere codice che altrimenti non sarebbe conforme a questa restrizione, puoi attivare esplicitamente la chiamata importScripts() al di fuori del gestore di eventi utilizzando il metodo workbox.loadModule():
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Referencing workbox.strategies will now work as expected.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
In alternativa, puoi creare un riferimento agli spazi dei nomi pertinenti al di fuori dei tuoi gestori di eventi e utilizzarlo in seguito:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Using the previously-initialized strategies will work as expected.
const cacheFirst = new strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Forza l'utilizzo di build di debug o di produzione
Tutti i moduli di Workbox includono due build: una build di debug che contiene il logging e il controllo dei tipi aggiuntivi e una build di produzione che rimuove i log e il controllo del tipo.
Per impostazione predefinita, workbox-sw utilizzerà la build di debug per i siti su localhost,
ma per qualsiasi altra origine utilizzerà la build di produzione.
Se vuoi forzare le build di debug o di produzione, puoi impostare l'opzione di configurazione debug:
workbox.setConfig({
debug: true,
});
Converti il codice utilizzando le istruzioni di importazione per usare workbox-sw
Durante il caricamento di Workbox utilizzando workbox-sw, tutti i pacchetti Workbox sono accessibili tramite lo spazio dei nomi globale workbox.*.
Se hai un esempio di codice che utilizza istruzioni import che vuoi convertire
per utilizzare workbox-sw, devi solo caricare workbox-sw e sostituire tutte le istruzioni import con variabili locali che fanno riferimento
a questi moduli nello spazio dei nomi globale.
Questo funziona perché ogni pacchetto del service worker di Workbox pubblicato in npm è disponibile anche nello spazio dei nomi globale di workbox tramite una versione camelCase del nome (ad esempio, tutti i moduli esportati dal pacchetto workbox-precaching npm si trovano in workbox.precaching.*. Inoltre, tutti i moduli esportati dal pacchetto
workbox-background-sync npm sono disponibili in
workbox.backgroundSync.*).
Ad esempio, ecco del codice che utilizza istruzioni import che fanno riferimento ai moduli della casella di lavoro:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);
Ed ecco lo stesso codice riscritto per utilizzare workbox-sw (nota che solo le istruzioni di importazione sono cambiate, ma la logica non è stata modificata):
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);