Ontwikkelaars die eerder sw-precache en/of sw-toolbox hebben gebruikt, kunnen eenvoudig upgraden naar de Workbox-bibliothekenfamilie. Een upgrade naar Workbox biedt een moderne, uitbreidbare ervaring voor servicemedewerkers met verbeterde foutopsporing en ergonomie voor ontwikkelaars.
Wijzigingen aan uw bestaande configuratie
Als u sw-precache gebruikt die is geconfigureerd met een van de volgende opties, moet u rekening houden met de volgende wijzigingen wanneer u naar Workbox migreert.
Hernoemde opties
De configuratieparameter dynamicUrlToDependencies is hernoemd naar templatedURLs .
De configuratieparameter staticFileGlobs is hernoemd naar globPatterns .
De configuratieparameter runtimeCaching gebruikt een bijgewerkte set opties, die overeenkomen met de namen die worden gebruikt in de onderliggende Workbox-modules. Om te illustreren wat er is hernoemd, deze sw-precache -configuratie:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
is gelijk aan deze Workbox-configuratie:
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,
},
},
}],
Verouderde opties
Express-stijl wildcard-routes worden niet langer ondersteund . Als u Express-stijl wildcardroutes gebruikte in de runtimeCaching configuratie of rechtstreeks in sw-toolbox , migreer dan naar een gelijkwaardige reguliere expressieroute wanneer u Workbox gebruikt.
sw-precache-migraties
Van de sw-precache CLI tot workbox-cli
Ontwikkelaars die de opdrachtregelinterface sw-precache gebruiken en de opdracht handmatig uitvoeren of als onderdeel van een npm scripts gebaseerd bouwproces, zullen merken dat het gebruik van de workbox-cli -module de gemakkelijkste manier is om te migreren. Door workbox-cli te installeren krijgt u toegang tot een binair bestand genaamd workbox .
Terwijl de sw-precache CLI configuratie via opdrachtregelvlaggen of een configuratiebestand ondersteunde , vereist de workbox CLI dat alle configuratieopties in een configuratiebestand worden aangeboden, met behulp van CommonJS module.exports .
De workbox CLI ondersteunt een aantal verschillende modi. (Gebruik workbox --help om ze allemaal te zien.) Maar de modus die het meest overeenkomt met de functionaliteit van sw-precache is generateSW . Dus een oproep aan
$ sw-precache --config='sw-precache-config.js'
kan worden uitgedrukt als
$ workbox generateSW workbox-config.js
Van de sw-precache-knooppuntmodule tot de workbox-build-knooppuntmodule
Ontwikkelaars die de node API voor sw-precache gebruiken, hetzij als onderdeel van een gulp / Grunt -workflow of gewoon binnen een aangepast node -buildscript, kunnen migreren door over te schakelen naar de workbox-build node module.
De functie generateSW() van de workbox-build module komt het meest overeen met de write() -functie van de sw-precache module. Een belangrijk verschil is dat generateSW() altijd een Promise retourneert, terwijl de oude write() functie zowel een callback als een op Promise gebaseerde interface ondersteunde.
gulp in de trant van
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
kan worden gewijzigd in
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
Van de sw-precache-webpack-plug-in tot de Workbox webpack-plug-in
Ontwikkelaars die de sw-precache-webpack-plugin gebruiken als onderdeel van hun webpack- buildproces kunnen migreren door over te schakelen naar de GenerateSW klasse binnen de workbox-webpack-plugin module.
workbox-webpack-plugin integreert rechtstreeks met het webpack-bouwproces en "weet" over alle activa die door een bepaalde compilatie worden gegenereerd. Dit betekent dat u voor veel gebruiksscenario's kunt vertrouwen op het standaardgedrag van workbox-webpack-plugin zonder aanvullende configuratie, en een servicemedewerker krijgt die gelijkwaardig is aan wat sw-precache-webpack-plugin biedt.
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
kan worden gewijzigd in
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
sw-toolbox-migraties
Migreer van handgemaakte sw-toolbox naar workbox-sw
Als u sw-toolbox rechtstreeks gebruikte (in plaats van het impliciet te gebruiken via runtimeCaching optie van sw-precache ), dan vereist de migratie naar Workbox enkele handmatige aanpassingen om het equivalente gedrag te krijgen. Voor meer context leest u de documentatie voor de modules workbox-routing en workbox-strategies die u kunnen helpen meer context te bieden.
Hier volgen enkele codefragmenten om de migratie te begeleiden. Deze sw-toolbox code:
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;
is gelijk aan deze Workbox-code:
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());
Hulp krijgen
We verwachten dat de meeste migraties naar Workbox eenvoudig zullen zijn. Als u problemen tegenkomt die niet in deze handleiding worden behandeld, kunt u ons dit laten weten door een probleem op GitHub te openen .