Как добавить background-sync-plugin в workbox-build

Question

У меня есть вопрос, касающийся рабочего ящика и create-реагировать-приложение v2. Я использую workbox-build для создания пользовательского сервисного работника, и есть проблема с введением

const backgroundSync = new workbox.backgroundSync.Plugin('ticketsQueue', {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
});


const buildSW = () =>
  workboxBuild.generateSW({
    globDirectory: 'build',
   // importWorkboxFrom: 'local',
    globPatterns: ['**/*.{json,ico,html,js,css,woff2,woff,png,svg}'],
    globIgnores: ['asset-manifest.json'],
    skipWaiting: true,
    clientsClaim: true,
    swDest: 'build/sw.js',
    navigateFallback: 'index.html',
    directoryIndex: 'index.html',
    runtimeCaching: [
      {
        urlPattern: new RegExp(`^${apiUrl}/tickets/create`),
        handler: 'networkOnly',
        options: {
          plugins: [
            backgroundSync
          ]
        },
        method: 'POST'
      },
     ]
  });

buildSW();

Когда я пытаюсь выполнить buildSW () с помощью nodejs, выдается ошибка ссылки. ReferenceError: рабочая область не определена Как это включить? Или есть другой способ? Спасибо

Answer 1

Что ж, поиграв с шаблоном URL, я понял, что именно здесь я допустил ошибку. Одно исправление в шаблоне URL, и я увидел создание очереди indexeddb и начало фоновой синхронизации, как и ожидалось. Большое спасибо

Answer 2

Есть несколько вариантов.

Во-первых, вы можете переключиться в режим injectManifest и получить полный контроль над вашим сервисным работником, полагаясь на инструмент сборки, который просто вводит массив файлов для предварительного кэширования.

Во-вторых, имеется свойство ярлыка options, которое упрощает добавление в плагин фоновой синхронизации. Конфиг выглядит примерно так:

runtimeCaching: [{
  // Match any same-origin request that contains 'api'.
  urlPattern: /api/,
  handler: 'networkOnly',
  options: {
    backgroundSync: {
      name: 'my-queue-name',
      options: {
        maxRetentionTime: 60 * 60,
      },
    },
  },
}]