Question

我正在使用workbox-webpack-plugin以及以下配置。

new WorkboxPlugin.GenerateSW({
      globDirectory: outputDir,
      globPatterns: ['**/*.{html,js}'],
      swDest: path.join(outputDir, 'sw.js'),
      clientsClaim: true,
      skipWaiting: true,
      runtimeCaching: [
        {
          urlPattern: new RegExp('cdn.test.com/'),
          handler: 'CacheFirst'
        }
      ]
    })

这正确构建。但问题是加载sw.js文件。我有一个自定义路径（https://test.com/custom/）而非直接到域（https://test.com）。构建之后，sw.js尝试加载的路径是https://test.com/sw.js而不是https://test.com/custom/sw.js，我的整个应用程序构建所在的位置。这也是我的output.publicPath webpack中提到的路径。如何在Workbox插件配置中设置它？我使用的是"3.0.0-beta.2"版本。

Answer 1

刚刚意识到我需要在我的应用程序中注册服务工作者，我可以提及路径。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/custom/sw.js').then(registration => {
      console.log('SW registered: ', registration);
    }).catch(registrationError => {
      console.log('SW registration failed: ', registrationError);
    });
  });
}

解决了问题

Workbox插件不考虑output.publicPath加载serviceworker文件

1 个答案: