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