El módulo workbox-sw proporciona una manera muy fácil de comenzar a usar los módulos de Workbox, simplifica la carga de estos y ofrece algunos métodos auxiliares simples.
Puedes usar workbox-sw a través de nuestra CDN o usarlo con un conjunto de archivos de caja de trabajo en tu propio servidor.
Usa Workbox SW a través de CDN
La manera más fácil de comenzar a usar este módulo es mediante la CDN. Solo debes agregar lo siguiente a tu service worker:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
Con este elemento, tendrás el espacio de nombres workbox en tu service worker que
proporcionará acceso a todos los módulos de Workbox.
workbox.precaching.*
workbox.routing.*
etc
Cuando empiezas a usar los módulos adicionales, ocurre algo mágico.
Cuando hagas referencia a un módulo por primera vez, workbox-sw lo detectará y cargará el módulo antes de que esté disponible. Puedes ver esto en la pestaña Red de Herramientas para desarrolladores.
Tu navegador almacenará en caché estos archivos y estarán disponibles para usarlos sin conexión en el futuro.
Usa archivos de caja de trabajo local en lugar de CDN
Si no deseas usar la CDN, es fácil cambiarte a los archivos de Workbox alojados en tu propio dominio.
El enfoque más simple es obtener los archivos mediante el comando copyLibraries de workbox-cli y, luego, indicarle a workbox-sw dónde encontrarlos mediante 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 a 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 ocurrir dentro del controlador install de un service worker o durante la ejecución inicial síncrona de la secuencia de comandos del service worker.
Para evitar infringir esta restricción, una práctica recomendada es hacer referencia a los distintos
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 adecuado:
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 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 código que, de otro modo, no se aplicaría a esta restricción, puedes activar explícitamente
la llamada a importScripts() fuera del controlador de eventos con 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}));
}
});
Fuerza 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 el registro y la verificación de tipo adicional, y una compilación de producción que quita el registro y la verificación de tipos.
De forma predeterminada, workbox-sw usará la compilación de depuración para sitios en localhost, pero, para cualquier otro origen, usará la compilación de producción.
Si deseas forzar la depuración o las compilaciones de producción, puedes establecer la opción de configuración debug:
workbox.setConfig({
debug: true,
});
Convierte el código mediante sentencias de importación para usar workbox-sw
Cuando cargas Workbox con workbox-sw, se accede a todos los paquetes de Workbox a través del espacio de nombres workbox.* global.
Si tienes una muestra de código que usa declaraciones import que quieres convertir para usar workbox-sw, lo único que debes hacer es cargar workbox-sw y reemplazar todas las declaraciones import por variables locales que hagan referencia a esos módulos en el espacio de nombres global.
Esto funciona porque todos los paquetes de service worker de Workbox publicados en npm están
disponibles en el espacio de nombres global workbox a través de una
versión camelCase del nombre (p.ej.,
todos los módulos exportados del paquete de npm workbox-precaching se pueden encontrar en
workbox.precaching.*. Además, todos los módulos exportados del paquete de npm
workbox-background-sync se pueden encontrar en
workbox.backgroundSync.*).
A modo de ejemplo, este es un código que usa sentencias import que hacen referencia a módulos de Workbox:
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 cambiaron las sentencias de importación, es decir, no se tocó 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]})],
})
);