Los desarrolladores que ya usaron sw-precache
o sw-toolbox
disponen de una ruta de actualización directa a la familia de bibliotecas de Workbox. La actualización a Workbox proporcionará una experiencia de service worker moderna y extensible con mejor depuración y ergonomía de los desarrolladores.
Modificaciones en tu configuración existente
Si usas sw-precache
configurado con alguna de las siguientes opciones, deberás tener en cuenta los siguientes cambios cuando migres a Workbox.
Opciones con cambios de nombre
Se cambió el nombre del parámetro de configuración dynamicUrlToDependencies
a templatedURLs
.
Se cambió el nombre del parámetro de configuración staticFileGlobs
a globPatterns
.
El parámetro de configuración runtimeCaching
toma un conjunto actualizado de opciones correspondientes a los nombres usados en los módulos de Workbox subyacentes. Para ilustrar qué se cambió, esta configuración de sw-precache
:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
equivale a la siguiente configuración de Workbox:
runtimeCaching: [{
urlPattern: /api/,
// 'fastest' is now 'StaleWhileRevalidate'
handler: 'StaleWhileRevalidate',
options: {
// options.cache.name is now options.cacheName
cacheName: 'my-api-cache',
// options.cache is now options.expiration
expiration: {
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
Opciones obsoletas
Las rutas de comodín de estilo exprés ya no se admiten. Si usabas rutas de comodín de estilo Express en la configuración runtimeCaching
o directamente en sw-toolbox
, migra a una ruta de expresión regular equivalente cuando uses Workbox.
Migraciones de sw-precache
Desde la CLI de sw-precache hasta workbox-cli
Los desarrolladores que usen la interfaz de línea de comandos sw-precache
, ya sea que ejecuten el comando de forma manual o como parte de un proceso de compilación basado en npm scripts
, descubrirán que el uso del módulo workbox-cli
es la forma más fácil de migrar. Si instalas workbox-cli
, obtendrás acceso a un objeto binario llamado workbox
.
Si bien la CLI de sw-precache
admitía la configuración mediante marcas de línea de comandos o un archivo de configuración, la CLI de workbox
requiere que se proporcionen todas las opciones de configuración en un archivo de configuración con CommonJS module.exports
.
La CLI de workbox
admite varios modos diferentes. (Usa workbox --help
para verlas todas). Sin embargo, el modo que más coincide con la funcionalidad de sw-precache
es generateSW
. Entonces, invoquemos
$ sw-precache --config='sw-precache-config.js'
se puede expresar como
$ workbox generateSW workbox-config.js
Desde el módulo de nodo sw-precache hasta el módulo de nodo Workbox-build
Los desarrolladores que usan la API de node
para sw-precache
, ya sea como parte de un flujo de trabajo gulp
/Grunt
o solo dentro de una secuencia de comandos de compilación de node
personalizada, pueden migrar al módulo node
de workbox-build
.
La función generateSW()
del módulo workbox-build
coincide más con la función write()
del módulo sw-precache
. Una diferencia clave es que generateSW()
siempre muestra una promesa, mientras que la función write()
anterior admitía una devolución de llamada y una interfaz basada en promesas.
gulp
similar al
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
se puede cambiar a
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
Desde sw-precache-webpack-plugin hasta el complemento webpack de Workbox
Los desarrolladores que usan sw-precache-webpack-plugin
como parte de su proceso de compilación de webpack pueden migrar a la clase GenerateSW
dentro del módulo workbox-webpack-plugin
.
workbox-webpack-plugin
se integra directamente con el proceso de compilación del paquete web y "conoce" todos los elementos generados por una compilación determinada. Esto significa que, para muchos casos de uso, puedes confiar en el comportamiento predeterminado de workbox-webpack-plugin
sin configuración adicional y obtener un service worker equivalente al que proporciona sw-precache-webpack-plugin
.
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
se puede cambiar a
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
migraciones de sw-toolbox
Migra de sw-toolbox hecho a mano a workbox-sw
Si usabas sw-toolbox
directamente (en lugar de usarlo de forma implícita a través de la opción runtimeCaching
de sw-precache
), la migración a Workbox requerirá algunos ajustes manuales para obtener el comportamiento equivalente. Para obtener más contexto, lee la documentación de los módulos workbox-routing
y workbox-strategies
.
Estos son algunos fragmentos de código para ayudar a guiar la migración. Este código sw-toolbox
:
importScripts('path/to/sw-toolbox.js');
// Set up a route that matches HTTP 'GET' requests.
toolbox.router.get(
// Match any URL that contains 'ytimg.com', regardless of
// where in the URL that match occurs.
/\.ytimg\.com\//,
// Apply a cache-first strategy to anything that matches.
toolbox.cacheFirst,
{
// Configure a custom cache name and expiration policy.
cache: {
name: 'youtube-thumbnails',
maxEntries: 10,
maxAgeSeconds: 30,
},
}
);
// Set a default network-first strategy to use when
// there is no explicit matching route:
toolbox.router.default = toolbox.networkFirst;
equivale a este código de Workbox:
importScripts('path/to/workbox-sw.js');
workbox.routing.registerRoute(
// Match any URL that contains 'ytimg.com'.
// Unlike in sw-toolbox, in Workbox, a RegExp that matches
// a cross-origin URL needs to include the initial 'https://'
// as part of the match.
new RegExp('^https://.*.ytimg.com'),
// Apply a cache-first strategy to anything that matches.
new workbox.strategies.CacheFirst({
// Configuration options are passed in to the strategy.
cacheName: 'youtube-thumbnails',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 10,
maxAgeSeconds: 30,
}),
// In Workbox, you must explicitly opt-in to caching
// responses with a status of 0 when using the
// cache-first strategy.
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
// Set a default network-first strategy to use when
// there is no explicit matching route:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst());
Cómo obtener ayuda
Prevemos que la mayoría de las migraciones a Workbox serán sencillas. Si tienes problemas que no se tratan en esta guía, abre un problema en GitHub para informarnos al respecto.