Gli sviluppatori che hanno già utilizzato sw-precache e/o sw-toolbox dispongono di un percorso di upgrade diretto alla famiglia di librerie Workbox. L'upgrade a Workbox offrirà un'esperienza moderna ed estensibile dei lavoratori dei servizi con debug ed ergonomia migliori per gli sviluppatori.
Modifiche alla configurazione esistente
Se utilizzi sw-precache configurato con una delle opzioni seguenti, dovrai prendere in considerazione le modifiche indicate di seguito durante la migrazione a Workbox.
Opzioni rinominate
Il parametro di configurazione dynamicUrlToDependencies è stato rinominato templatedURLs.
Il parametro di configurazione staticFileGlobs è stato rinominato globPatterns.
Il parametro di configurazione runtimeCaching richiede un insieme aggiornato di opzioni, che corrispondono ai nomi utilizzati nei moduli di Workbox sottostanti. Per illustrare cosa è stato rinominato, questa configurazione di sw-precache:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
è equivalente alla seguente configurazione di 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,
},
},
}],
Opzioni deprecate
Le route con caratteri jolly in stile Express non sono più supportate. Se utilizzavi route con caratteri jolly in stile Express nella configurazione runtimeCaching o direttamente in sw-toolbox, esegui la migrazione a una route di espressione regolare equivalente quando utilizzi Workbox.
migrazioni sw-precache
Dall'interfaccia a riga di comando sw-precache a workbox-cli
Per gli sviluppatori che utilizzano l'interfaccia a riga di comando sw-precache, eseguendo il comando manualmente o nell'ambito di un processo di compilazione basato su npm scripts, l'utilizzo del modulo workbox-cli sarà il modo più semplice per eseguire la migrazione. L'installazione di workbox-cli ti consentirà di accedere a un programma binario chiamato workbox.
Mentre l'interfaccia a riga di comando sw-precache supporta la configurazione tramite flag della riga di comando o file di configurazione, l'interfaccia a riga di comando workbox richiede che tutte le opzioni di configurazione siano fornite in un file di configurazione utilizzando CommonJS module.exports.
L'interfaccia a riga di comando workbox supporta diverse modalità. Usa workbox --help per vederli tutti. Tuttavia, la modalità che più si avvicina alla funzionalità di sw-precache è generateSW. Quindi una chiamata
$ sw-precache --config='sw-precache-config.js'
può essere espresso come
$ workbox generateSW workbox-config.js
Dal modulo nodo sw-precache al modulo nodo workbox-build
Gli sviluppatori che utilizzano l'API node per sw-precache, nell'ambito di un flusso di lavoro gulp/Grunt o solo all'interno di uno script di build node personalizzato, possono eseguire la migrazione passando al modulo workbox-build node.
La funzione generateSW() del modulo workbox-build si avvicina maggiormente alla funzione write() del modulo sw-precache. Una differenza fondamentale è che generateSW() restituisce sempre un valore Promise, mentre la precedente funzione write() supportava sia un callback sia un'interfaccia basata su Promise.
di utilizzo di gulp in linea con la
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
può essere modificato in
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
Da sw-precache-webpack-plugin al plug-in Workbox webpack
Gli sviluppatori che usano sw-precache-webpack-plugin come parte del processo di compilazione di webpack possono eseguire la migrazione passando alla classe GenerateSW all'interno del modulo workbox-webpack-plugin.
workbox-webpack-plugin si integra direttamente con il processo di compilazione del webpack ed è a conoscenza di tutte le risorse generate da una determinata compilazione. Ciò significa che, per molti casi d'uso, puoi fare affidamento sul comportamento predefinito di workbox-webpack-plugin senza configurazione aggiuntiva e ottenere un service worker equivalente a quello fornito da sw-precache-webpack-plugin.
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
può essere modificato in
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
migrazioni di sw-toolbox
Eseguire la migrazione da strumenti sw artigianali a workbox-sw
Se utilizzavi direttamente sw-toolbox (anziché usarlo implicitamente tramite l'opzione runtimeCaching di sw-precache), la migrazione a Workbox richiede alcune modifiche manuali per ottenere il comportamento equivalente. Per maggiori informazioni, leggi la documentazione relativa ai moduli workbox-routing e workbox-strategies.
Ecco alcuni snippet di codice per guidare la migrazione. Questo codice di 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;
è equivalente al seguente codice di 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());
Richiesta di aiuto
Prevediamo che la maggior parte delle migrazioni a Workbox sarà diretta. Se riscontri problemi non trattati in questa guida, comunicacelo aprendo un problema su GitHub.