Deweloperzy, którzy wcześniej używali sw-precache lub sw-toolbox, mogą łatwo przejść na nową wersję biblioteki Workbox. Przejście na Workbox zapewni nowoczesne, rozszerzalne środowisko service worker oraz ulepszone debugowanie i ergonomię programistów.
Modyfikacje istniejącej konfiguracji
Jeśli używasz usługi sw-precache skonfigurowanego z dowolną z poniższych opcji, podczas migracji do Workbox musisz uwzględnić poniższe zmiany.
Zmienione nazwy opcji
Nazwa parametru konfiguracji dynamicUrlToDependencies została zmieniona na templatedURLs.
Nazwa parametru konfiguracji staticFileGlobs została zmieniona na globPatterns.
Parametr konfiguracji runtimeCaching przyjmuje zaktualizowany zestaw opcji odpowiadający nazwom używanym w bazowych modułach Workbox. Aby zilustrować zmianę nazwy, przedstawiamy tę konfigurację sw-precache:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
jest odpowiednikiem tej konfiguracji 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,
},
},
}],
Opcje wycofane
Trasy z symbolami wieloznacznymi w stylu ekspresowym nie są już obsługiwane. Jeśli używasz tras z symbolami wieloznacznymi w stylu Express w konfiguracji runtimeCaching lub bezpośrednio w sw-toolbox, przeprowadź migrację do równoważnej trasy opartej na wyrażeniach regularnych podczas korzystania z Workbox.
Migracje sw-precache
Od interfejsu wiersza poleceń sw-precache do workbox-cli
Dla programistów używających interfejsu wiersza poleceń sw-precache (ręcznie lub w ramach procesu kompilacji w npm scripts) najłatwiejszy sposób migracji będzie wykorzystanie modułu workbox-cli. Instalując aplikację workbox-cli, uzyskasz dostęp do pliku binarnego o nazwie workbox.
Chociaż interfejs wiersza poleceń sw-precache obsługuje konfigurowanie za pomocą flag wiersza poleceń lub pliku konfiguracji, interfejs wiersza poleceń workbox wymaga, aby wszystkie opcje konfiguracji były zawarte w pliku konfiguracji przy użyciu CommonJS module.exports.
Interfejs wiersza poleceń workbox obsługuje wiele różnych trybów. (aby je wyświetlić, użyj usługi workbox --help). Jednak tryb, który najlepiej pasuje do funkcji sw-precache, to generateSW. Wezwania do działania
$ sw-precache --config='sw-precache-config.js'
może być wyrażony jako
$ workbox generateSW workbox-config.js
Od modułu węzłów sw-precache do modułu węzła Workbox-build
Deweloperzy używający interfejsu node API w sw-precache, w ramach przepływu pracy gulp/Grunt lub tylko w ramach niestandardowego skryptu kompilacji node, mogą przeprowadzić migrację, przechodząc na moduł workbox-build node.
Funkcja generateSW() modułu workbox-build jest najbardziej zgodna z funkcją write() modułu sw-precache. Główna różnica polega na tym, że funkcja generateSW() zawsze zwraca obietnicę, a stara funkcja write() obsługiwała zarówno wywołanie zwrotne, jak i interfejs oparty na obietnicy.
gulp – wykorzystanie na poziomie
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
można zmienić na
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
Od sw-precache-webpack-plugin do wtyczki Workbox Webpack
Deweloperzy używający sw-precache-webpack-plugin w ramach procesu kompilacji pakietu internetowego mogą przeprowadzić migrację, przełączając się na klasę GenerateSW w module workbox-webpack-plugin.
workbox-webpack-plugin integruje się bezpośrednio z procesem kompilacji pakietu internetowego i „wie” o wszystkich zasobach wygenerowanych przez daną kompilację. Oznacza to, że w wielu przypadkach możesz polegać na domyślnym działaniu workbox-webpack-plugin bez dodatkowej konfiguracji i uzyskać dostęp do skryptu service worker odpowiednika tego, który zapewnia sw-precache-webpack-plugin.
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
można zmienić na
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
migracje z sw-toolbox
Migracja z ręcznie stworzonego pakietu narzędzi sw-toolbox do Workbox-sw
Jeśli używasz narzędzia sw-toolbox bezpośrednio (a nie pośrednio za pomocą opcji runtimeCaching w systemie sw-precache), migracja do Workbox wymaga kilku ręcznych zmian w celu uzyskania podobnego działania. Więcej informacji znajdziesz w dokumentacji modułów workbox-routing i workbox-strategies.
Oto kilka fragmentów kodu, które ułatwią Ci przeprowadzenie migracji. Ten kod z aplikacji 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;
jest odpowiednikiem tego kodu 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());
Uzyskiwanie pomocy
Przewidujemy, że większość migracji do Workbox będzie łatwa. Jeśli napotkasz problemy, których nie ma w tym przewodniku, daj nam znać, otwierając je na GitHubie.