Question

我对工作箱和create-react-app 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();

当我尝试使用nodejs执行buildSW（）时，也会给出参考错误。 ReferenceError：未定义工作箱如何包含呢？还是还有其他方法？谢谢

Answer 1

有两种选择。

首先，您可以切换为使用injectManifest mode，并依靠构建工具将文件数组注入到预缓存中，从而完全控制您的服务工作者。

第二，这里有一个快捷方式options属性，可以简化后台同步插件的添加。配置看起来像这样：

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

Answer 2

好吧，在使用了url模式之后，我意识到这是我犯错的地方。一种解决方法是在URL模式中，我看到创建了indexeddb队列，并且按预期开始进行后台同步。非常感谢

如何将background-sync-plugin添加到Workbox-Build

2 个答案: