Workbox-sw

El módulo workbox-sw es una forma muy fácil de comenzar con los módulos de Caja de trabajo, simplifica la carga de estos módulos y ofrece algunos métodos auxiliares sencillos.

Puedes usar workbox-sw a través de nuestra CDN o con un conjunto de archivos de caja de trabajo. en tu propio servidor.

Cómo usar Workbox SW a través de CDN

La forma más sencilla de comenzar a usar este módulo es mediante la CDN. Solo debes agrega lo siguiente a tu service worker:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

Con esto, tendrás el espacio de nombres workbox en tu service worker que que brindan acceso a todos los módulos de Workbox.

workbox.precaching.*
workbox.routing.*
etc

Hay magia que ocurre cuando comienzas a usar los módulos adicionales.

Cuando hagas referencia a un módulo por primera vez, workbox-sw detectará este y cargarlo antes de que esté disponible. Puedes ver que esto ocurre en la pestaña Red en Herramientas para desarrolladores.

Cómo cargar bibliotecas de la caja de trabajo en Herramientas para desarrolladores

Tu navegador almacenará en caché estos archivos, lo que permitirá que estén disponibles para el futuro el uso sin conexión.

Cómo usar archivos de la caja de trabajo local en lugar de una CDN

Si no quieres usar la CDN, es fácil cambiar a archivos de Workbox. alojado en tu propio dominio.

El enfoque más simple es obtener los archivos mediante el comando copyLibraries de workbox-cli y, luego, indicarle workbox-sw dónde encontrar estos archivos a través de la opción de configuración modulePathPrefix.

Si colocas los archivos en /third_party/workbox-vX.Y.Z/, los usarás de la siguiente manera:

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

Evita las importaciones asíncronas

De forma interna, cargar módulos nuevos por primera vez implica llamar importScripts() con la ruta de acceso al archivo JavaScript correspondiente (alojado en la CDN o a través de una URL local) En cualquier caso, se aplica una restricción importante: las llamadas implícitas a importScripts() solo pueden suceder en el controlador install de un service worker o durante la ejecución ejecución inicial de la secuencia de comandos del service worker.

Para evitar infringir esta restricción, una práctica recomendada es hacer referencia a los diversos Espacios de nombres workbox.* fuera de cualquier controlador de eventos o función asíncrona.

Por ejemplo, el siguiente código de service worker de nivel superior es correcto:

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()
);

Sin embargo, el siguiente código podría ser un problema si no hiciste referencia a workbox.strategies en ninguna otra parte de tu 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 necesitas escribir un código que, de lo contrario, se entraría en conflicto con esta restricción, puedes explícitamente Activa la llamada a importScripts() fuera del controlador de eventos mediante el Método 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}));
  }
});

Como alternativa, puedes crear una referencia a los espacios de nombres relevantes fuera de los controladores de eventos. y, luego, usar esa referencia más adelante:

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}));
  }
});

Forzar el uso de compilaciones de depuración o de producción

Todos los módulos de Workbox incluyen dos compilaciones, una de depuración que contiene registros, verificaciones de tipos adicionales y una compilación de producción elimina el registro y la verificación de tipo.

De forma predeterminada, workbox-sw usará la compilación de depuración para sitios en localhost, pero para cualquier otro origen, se usará la compilación de producción.

Si quieres forzar las compilaciones de depuración o de producción, puedes establecer la configuración de debug. opción:

workbox.setConfig({
  debug: true,
});

Convierte el código con sentencias de importación para usar workbox-sw

Cuando se carga Workbox con workbox-sw, se accede a todos los paquetes de Workbox mediante el espacio de nombres workbox.* global.

Si tienes una muestra de código que usa sentencias import que deseas convertir Para usar workbox-sw, lo único que debes hacer es cargar workbox-sw y reemplazar todas las sentencias import por variables locales que hagan referencia esos módulos en el espacio de nombres global.

Esto funciona porque cada paquete de service worker de Workbox que se publica en npm también disponible en el espacio de nombres global workbox Versión camelCase del nombre (p.ej., todos los módulos exportados desde el paquete npm de workbox-precaching workbox.precaching.* Y todos los módulos exportados Puedes encontrar el paquete npm de workbox-background-sync en workbox.backgroundSync.*).

A modo de ejemplo, aquí tienes parte de código que usa sentencias import que hacen referencia a Módulos del cuadro de trabajo:

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]})],
  })
);

Este es el mismo código reescrito para usar workbox-sw (ten en cuenta que solo el las sentencias de importación cambiaron, es decir, no se modificó la lógica):

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]})],
  })
);