zone de travail-SW

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.

Chargement des bibliothèques Workbox 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]})],
  })
);