Le module workbox-sw offre un moyen extrêmement facile d'être opérationnel.
avec les modules Workbox, simplifie leur chargement et
propose des méthodes d'assistance simples.
Vous pouvez utiliser workbox-sw via notre CDN ou avec un ensemble de fichiers de boîte de travail.
sur votre propre serveur.
Utiliser le logiciel Workbox via CDN
Le moyen le plus simple de commencer à utiliser ce module est d'utiliser le CDN. Il vous suffit de ajoutez le code suivant à votre service worker:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
Vous disposez ainsi de l'espace de noms workbox dans votre service worker, qui va
permettent d'accéder à tous les modules Workbox.
workbox.precaching.*
workbox.routing.*
etc
Lorsque vous commencez à utiliser les modules supplémentaires, la magie opère.
Lorsque vous référencez un module pour la première fois, workbox-sw le détecte
et charger le module avant de le rendre disponible. Vous pouvez le voir dans
l'onglet "Réseau" dans les outils de développement.
Ces fichiers seront mis en cache par votre navigateur et pourront être utilisés ultérieurement. hors connexion.
Utiliser des fichiers de boîte de travail locaux au lieu de CDN
Si vous ne souhaitez pas utiliser le CDN, vous pouvez facilement passer aux fichiers Workbox sur votre propre domaine.
L'approche la plus simple consiste à obtenir les fichiers via la commande copyLibraries de workbox-cli, puis à indiquer
workbox-sw où trouver ces fichiers via l'option de configuration modulePathPrefix.
Si vous placez les fichiers sous /third_party/workbox-vX.Y.Z/, vous les utiliserez comme suit:
importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});
Éviter les importations asynchrones
En arrière-plan, le premier chargement de nouveaux modules implique d'appeler
importScripts()
par le chemin d'accès au fichier JavaScript correspondant (hébergé sur le CDN ou via une URL locale).
Dans les deux cas, une restriction importante s'applique: les appels implicites à importScripts() ne peuvent
se produisent au sein du gestionnaire install d'un service worker ou lors de l'exécution
l'exécution initiale du script de service worker.
Pour éviter d'enfreindre cette restriction, il est recommandé de faire référence aux différents
Espaces de noms workbox.* en dehors des gestionnaires d'événements ou des fonctions asynchrones.
Par exemple, le code de service worker de premier niveau suivant convient parfaitement:
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()
);
Toutefois, le code ci-dessous peut poser problème si vous n'avez pas référencé workbox.strategies ailleurs dans votre
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}));
}
});
Si vous devez écrire du code qui, autrement, contournerait cette restriction, vous pouvez explicitement
déclencher l'appel importScripts() en dehors du gestionnaire d'événements à l'aide de
Méthode 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}));
}
});
Vous pouvez également créer une référence aux espaces de noms pertinents en dehors de vos gestionnaires d'événements, puis utiliser cette référence plus tard:
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}));
}
});
Forcer l'utilisation de builds de débogage ou de production
Tous les modules Workbox sont fournis avec deux versions : une version de débogage une journalisation, une vérification de type supplémentaire et un build de production supprime la journalisation et la vérification de type.
Par défaut, workbox-sw utilise la version de débogage pour les sites sur localhost,
mais pour toute autre origine, il utilisera
le build de production.
Si vous souhaitez forcer les versions de débogage ou de production, vous pouvez définir la configuration debug
option:
workbox.setConfig({
debug: true,
});
Convertissez le code à l'aide d'instructions d'importation pour utiliser workbox-sw
Lors du chargement de Workbox avec workbox-sw, tous les packages Workbox sont accessibles via
l'espace de noms global workbox.*.
Si vous disposez d'un exemple de code qui utilise des instructions import que vous souhaitez convertir
Pour utiliser workbox-sw, il vous suffit de charger workbox-sw et de remplacer toutes les instructions import par des variables locales qui font référence à
ces modules sur l'espace de noms global.
En effet, chaque package de service worker Workbox publié sur npm est également
disponible sur l'espace de noms global workbox via un
Version camelCase du nom (par exemple,
tous les modules exportés à partir du package npm workbox-precaching se trouvent
workbox.precaching.* Tous les modules exportés depuis le
Le package npm workbox-background-sync se trouve sur
workbox.backgroundSync.*).
À titre d'exemple, voici du code qui utilise des instructions import faisant référence
Modules de boîte de travail:
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]})],
})
);
Et voici le même code réécrit pour utiliser workbox-sw (notez que seul le
instructions d'importation ont changé et la logique n'a pas été modifiée):
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]})],
})
);