Разработчики, которые ранее использовали sw-precache и/или sw-toolbox имеют простой путь обновления до семейства библиотек Workbox. Обновление до Workbox предоставит сервисным работникам современные, расширяемые возможности с улучшенной эргономикой отладки и эргономикой для разработчиков.
Изменения существующей конфигурации
Если вы используете sw-precache , настроенный с помощью любого из следующих параметров, вам необходимо принять во внимание следующие изменения при переходе на Workbox.
Переименованные параметры
Параметр конфигурации dynamicUrlToDependencies был переименован в templatedURLs .
Параметр конфигурации staticFileGlobs был переименован в globPatterns .
Параметр конфигурации runtimeCaching принимает обновленный набор параметров, соответствующий именам, используемым в базовых модулях Workbox. Чтобы проиллюстрировать переименование, можно привести следующую конфигурацию sw-precache :
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
эквивалентно этой конфигурации 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,
},
},
}],
Устаревшие параметры
Маршруты с подстановочными знаками в стиле Express больше не поддерживаются . Если вы использовали подстановочные маршруты в стиле Express либо в конфигурации runtimeCaching , либо непосредственно в sw-toolbox , перейдите на эквивалентный маршрут регулярного выражения при использовании Workbox.
миграция sw-precache
От интерфейса командной строки sw-precache к workbox-cli
Разработчики, использующие интерфейс командной строки sw-precache , запуская команду вручную или как часть процесса сборки на основе npm scripts , найдут использование модуля workbox-cli самым простым способом миграции. Установка workbox-cli предоставит вам доступ к двоичному файлу под названием workbox .
Хотя интерфейс командной строки sw-precache поддерживает настройку либо с помощью флагов командной строки, либо с помощью файла конфигурации, интерфейс командной строки workbox требует, чтобы все параметры конфигурации были предоставлены в файле конфигурации с использованием CommonJS module.exports .
Интерфейс командной строки workbox поддерживает несколько различных режимов. (Чтобы увидеть их все, используйте workbox --help .) Но режим, который наиболее точно соответствует функциональности sw-precache — generateSW . Итак, звонок в
$ sw-precache --config='sw-precache-config.js'
может быть выражено как
$ workbox generateSW workbox-config.js
От модуля узла sw-precache к модулю узла workbox-build
Разработчики, использующие API node для sw-precache либо как часть рабочего процесса gulp / Grunt , либо просто в рамках пользовательского сценария сборки node , могут выполнить миграцию, переключившись на модуль node workbox-build .
Функция generateSW() модуля workbox-build наиболее точно соответствует функции write() модуля sw-precache . Одно из ключевых отличий состоит в том, что generateSW() всегда возвращает Promise, в то время как старая функция write() поддерживала как обратный вызов, так и интерфейс на основе Promise.
использование gulp по принципу
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
можно изменить на
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
От плагина sw-precache-webpack-plugin к плагину веб-пакета Workbox
Разработчики, использующие sw-precache-webpack-plugin в процессе сборки своего веб-пакета, могут перейти, переключившись на класс GenerateSW в модуле workbox-webpack-plugin .
workbox-webpack-plugin напрямую интегрируется с процессом сборки веб-пакета и «знает» обо всех ресурсах, сгенерированных данной компиляцией. Это означает, что во многих случаях использования вы можете положиться на поведение workbox-webpack-plugin по умолчанию без дополнительной настройки и получить сервис-воркер, эквивалентный тому, что предоставляет sw-precache-webpack-plugin .
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
можно изменить на
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
миграция sw-toolbox
Миграция с созданного вручную sw-toolbox на workbox-sw
Если вы использовали sw-toolbox напрямую (а не использовали его неявно через опцию runtimeCaching в sw-precache ), то миграция в Workbox потребует некоторых ручных настроек, чтобы получить эквивалентное поведение. Для получения дополнительной информации прочтите документацию по модулям workbox-routing и workbox-strategies которые помогут получить больше контекста.
Вот несколько фрагментов кода, которые помогут выполнить миграцию. Этот код 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;
эквивалентно этому коду 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());
Получение помощи
Мы ожидаем, что большинство переходов на Workbox будет простым. Если у вас возникнут проблемы, не описанные в этом руководстве, сообщите нам об этом, открыв проблему на GitHub.