Deweloperzy, którzy wcześniej korzystali z wersji sw-precache lub sw-toolbox, mogą łatwo uaktualnić swoje biblioteki do rodziny bibliotek Workbox. Przejście na Workbox zapewni pracownikom nowoczesne, rozszerzalne środowisko obsługi klienta z ulepszonym debugowaniem i ergonomią dla programistów.
Modyfikacje istniejącej konfiguracji
Jeśli używasz sw-precache skonfigurowanego z dowolną z tych opcji, podczas migracji do Workbox musisz wziąć pod uwagę te zmiany.
Zmienione opcje
Nazwa parametru konfiguracji dynamicUrlToDependencies została zmieniona na templatedURLs.
Parametr konfiguracji staticFileGlobs został przemianowany na globPatterns.
Parametr konfiguracji runtimeCaching przyjmuje zaktualizowany zestaw opcji odpowiadających nazwom używanym w podstawowych modułach Workbox. Aby zilustrować, co zostało przemianowane, oto konfiguracja sw-precache:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
jest równoważna 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,
},
},
}],
Wycofane opcje
Trasy z symbolami wieloznacznymi w stylu ekspresowym nie są już obsługiwane. Jeśli używasz tras z symbolami wieloznacznymi w stylu ekspresowym w konfiguracji runtimeCaching lub bezpośrednio w sw-toolbox, podczas korzystania z Workbox przeprowadź migrację na równoważną trasę z wyrażeniami regularnymi.
migracje sw-precache.
Z interfejsu wiersza poleceń sw-precache do interfejsu wiersza poleceń Workbox
Deweloperzy korzystający z interfejsu wiersza poleceń sw-precache (ręcznie lub w ramach procesu kompilacji opartego na npm scripts) znajdą najłatwiejszą metodę migracji w module workbox-cli. Po zainstalowaniu aplikacji workbox-cli uzyskasz dostęp do pliku binarnego workbox.
Chociaż interfejs wiersza poleceń sw-precache obsługiwał konfigurację za pomocą flag wiersza poleceń lub pliku konfiguracji, interfejs wiersza poleceń workbox wymaga podania wszystkich opcji konfiguracji w pliku konfiguracji przy użyciu CommonJS module.exports.
Interfejs wiersza poleceń workbox obsługuje kilka różnych trybów. (aby zobaczyć wszystkie, kliknij workbox --help). Tryb, który najbardziej przypomina funkcjonalność sw-precache, to generateSW. A więc telefon do
$ sw-precache --config='sw-precache-config.js'
może być wyrażona jako
$ workbox generateSW workbox-config.js
Z modułu węzła sw-precache do modułu węzła workbox-build
Deweloperzy używający interfejsu API node w sw-precache (w ramach przepływu pracy gulp/Grunt lub tylko w ramach niestandardowego skryptu kompilacji node) mogą przeprowadzić migrację, przełączając się na moduł workbox-build node.
Funkcja generateSW() z modułu workbox-build najbardziej przypomina funkcję write() z modułu sw-precache. Jedną z głównych różnic jest to, że funkcja generateSW() zawsze zwraca obietnicę, podczas gdy stara funkcja write() obsługiwała zarówno wywołanie zwrotne, jak i interfejs oparty na obietnicach.
Wykorzystanie gulp w liniach
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.
});
});
Z wtyczki sw-precache-webpack-plugin do wtyczki Workbox webpack
Deweloperzy, którzy używają pakietu sw-precache-webpack-plugin w ramach procesu kompilacji webpack, mogą przejść na klasę GenerateSW w module workbox-webpack-plugin.
workbox-webpack-plugin integruje się bezpośrednio z procesem kompilacji webpack i „zna” wszystkie zasoby wygenerowane przez daną kompilację. Oznacza to, że w wielu przypadkach możesz polegać na domyślnym zachowaniu skryptu workbox-webpack-plugin bez dodatkowej konfiguracji i uzyskać skrypt usług podobny do skryptu 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.
}),
],
};
sw-toolbox migrations
Przejście z ręcznie tworzonego sw-toolbox do workbox-sw
Jeśli używasz bezpośrednio sw-toolbox (a nie pośrednio za pomocą opcji runtimeCaching w sw-precache), migracja do Workbox wymaga wprowadzenia kilku ręcznych zmian, aby uzyskać takie samo działanie. Więcej informacji znajdziesz w dokumentacji dotyczącej modułów workbox-routing i workbox-strategies.
Oto kilka fragmentów kodu, które ułatwią Ci przeprowadzenie migracji. Ten kod 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 równoważne z tym kodem 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 prosta. Jeśli napotkasz problemy, których nie ma w tym przewodniku, otwórz zgłoszenie na GitHubie.