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.