Миграция из sw-precache или sw-toolbox,Миграция из sw-precache или sw-toolbox

Разработчики, которые ранее использовали 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.