Los desarrolladores que anteriormente usaron sw-precache o sw-toolbox tienen una ruta de actualización directa a la familia de bibliotecas de Workbox. La actualización a Workbox proporcionará una experiencia de servicio trabajador moderna y extensible con una mejor depuración y ergonomía para 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 que cambiaron 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, que corresponden a los nombres que se usan en los módulos subyacentes de Workbox. Para ilustrar lo que se cambió de nombre, esta configuración de sw-precache:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
es equivalente a esta 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
Ya no se admiten las rutas de comodines de estilo exprés. Si usabas rutas de comodín de estilo Express en la configuración de 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 a workbox-cli
Los desarrolladores que usan la interfaz de línea de comandos de 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 usar el 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 admite la configuración a través de marcas de línea de comandos o un archivo de configuración, la CLI de workbox requiere que todas las opciones de configuración se proporcionen 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. Por lo tanto, una llamada a
$ sw-precache --config='sw-precache-config.js'
puede expresarse como
$ workbox generateSW workbox-config.js
Del módulo de nodo sw-precache al módulo de nodo de compilación de la caja de trabajo
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.
Uso de gulp similar a
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.
});
});
Del complemento sw-precache-webpack-plugin al complemento Workbox webpack
Los desarrolladores que usan sw-precache-webpack-plugin como parte de su proceso de compilación de webpack pueden migrar cambiando a la clase GenerateSW dentro del módulo workbox-webpack-plugin.
workbox-webpack-plugin se integra directamente con el proceso de compilación de webpack y “conoce” todos los recursos 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 elaborado 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 requiere algunos ajustes manuales para obtener el comportamiento equivalente. Para obtener más información, consulta la documentación de los módulos workbox-routing y workbox-strategies.
Estos son algunos fragmentos de código que te ayudarán 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;
es equivalente 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 sean sencillas. Si tienes problemas que no se abordan en esta guía, abre un problema en GitHub para informarnos al respecto.