Il modulo workbox-sw rappresenta un modo estremamente facile per iniziare a lavorare
con i moduli Workbox, semplifica il caricamento dei moduli Workbox e
offre alcuni semplici metodi di supporto.
Puoi utilizzare workbox-sw tramite la nostra CDN o con un insieme di file della casella di lavoro
sul tuo server.
Utilizzo del software Workbox tramite CDN
Il modo più semplice per iniziare a utilizzare questo modulo è tramite la CDN. Devi solo aggiungi quanto segue al Service worker:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
Con questo avrai lo spazio dei nomi workbox nel tuo service worker
forniscono l'accesso a tutti i moduli Workbox.
workbox.precaching.*
workbox.routing.*
etc
Quando inizi a utilizzare i moduli aggiuntivi, accade una certa magia.
Quando fai riferimento a un modulo per la prima volta, workbox-sw rileverà questa
e caricare il modulo prima di renderlo disponibile. Puoi vedere cosa succede in
nella scheda Network (Rete) in DevTools.
Questi file verranno memorizzati nella cache dal tuo browser e saranno disponibili in futuro l'utilizzo offline.
Utilizzo di file della casella di lavoro locale al posto di una CDN
Se non vuoi utilizzare la CDN, è abbastanza facile passare ai file Workbox ospitati sul tuo dominio.
L'approccio più semplice consiste nel recuperare i file tramite il comando copyLibraries di workbox-cli e poi indicare
workbox-sw dove trovare questi file tramite l'opzione di configurazione modulePathPrefix.
Se metti i file sotto /third_party/workbox-vX.Y.Z/, li useresti in questo modo:
importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});
Evita importazioni asincrone
Di base, per caricare nuovi moduli per la prima volta è necessario
importScripts()
con il percorso del file JavaScript corrispondente (ospitato sulla rete CDN o tramite un URL locale).
In entrambi i casi, si applica una limitazione importante: le chiamate implicite a importScripts() possono solo
avvengono all'interno del gestore install di un service worker o durante l'attività sincrona,
esecuzione iniziale dello script del service worker.
Per evitare di violare questa restrizione, una best practice consiste nel fare riferimento ai vari
workbox.* spazi dei nomi al di fuori di gestori di eventi o funzioni 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 riportato di seguito potrebbe rappresentare un problema se non hai fatto riferimento a workbox.strategies altrove nella
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 devi scrivere codice che altrimenti non andrebbe a buon fine di questa limitazione, puoi
attivare la chiamata importScripts() all'esterno del gestore di eventi utilizzando
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. per poi 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 Workbox sono dotati di due build, una build di debug che contiene il logging e il controllo aggiuntivo del tipo, oltre a una build di produzione rimuove il logging 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 userà la build di produzione.
Se vuoi forzare le build di debug o di produzione, puoi impostare la configurazione debug
:
workbox.setConfig({
debug: true,
});
Converti il codice con istruzioni di importazione per utilizzare workbox-sw
Quando carichi Workbox utilizzando workbox-sw, accedi a tutti i pacchetti Workbox tramite
lo spazio dei nomi globale workbox.*.
Se disponi di un esempio di codice che utilizza istruzioni import da convertire
per utilizzare workbox-sw, è sufficiente caricare workbox-sw e sostituire tutte le istruzioni import con variabili locali che fanno riferimento
dei moduli sullo spazio dei nomi globale.
Questo funziona perché ogni pacchetto del worker di servizio Workbox pubblicato su npm viene
disponibile nello spazio dei nomi workbox globale tramite
La versione del nome in camelCase (ad es.
tutti i moduli esportati dal pacchetto npm workbox-precaching sono disponibili su
workbox.precaching.*. E tutti i moduli esportati
workbox-background-sync pacchetto npm disponibile su
workbox.backgroundSync.*).
Ad esempio, ecco un codice che utilizza le istruzioni import facendo riferimento
Moduli 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 e 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]})],
})
);