服务工作者使用sw-precache，webpack并做出反应

Question

尝试添加使用sw-precache-webpack-plugin v.0.11.4工作的服务的缓存系统时遇到了一些麻烦。我的想法是，用户可以使用应用离线。

我的应用位于 React v.15.5.4和节点 v.6.9.5，但手柄中有一些部分（我们正在迁移的旧平台）反应），这两个人住在一起。 React中的部分，html由Node端点提供，并且不是项目的根，例如：

• 本地主机：3000 / this_is_the_part_with_react

我想离线使用的唯一部分是使用React完成的项目部分。对于这部分，我使用 webpack v.2.6.1来创建所有项目文件：

const OUTPUT_DIR = 'public/assets';
const runtimeCaching = [
  {
     urlPattern: '/some/url/to/cache',
     handler: 'cacheFirst'
  }
];

export default () => ({ 
  entry: {
     'react_part': path.join(__dirname, 'src/example.jsx'),
  },
  output: {
     path: path.join(__dirname, OUTPUT_DIR),
     filename: 'js/[name].js',
  },
  resolve: {
     extensions: ['.js', '.jsx'],
  },
  plugins: [
     new CleanWebpackPlugin([
       OUTPUT_DIR,
     ]),
     new SWPrecacheWebpackPlugin({
       cacheId: 'my-project',
       filename: 'service-worker.js',
       directoryIndex: false,
       minify: true,
       runtimeCaching,
     }),
   ],
});

问题：

使用这样的配置，当使用webpack编译React应用程序时，将在/public/assets/service-worker.js内创建服务工作者。

我遇到的问题是，我需要这样做才能注册它：

if ('serviceWorker' in navigator) {
    navigator
      .serviceWorker
      .register('/assets/service-worker.js'); // Adding /assets/ ...
 }

使用DevTools检查，我可以看到服务工作者如何注册而没有问题，但是：

localhost:3000/assets

尝试解决，首先尝试：

如果我尝试在服务工作者注册中添加此选项：{ scope: './' }，则会显示以下错误消息：

  

DOMException：无法注册ServiceWorker：路径   提供范围（'/ this_is_the_part_with_react'）不在最大值之下   允许范围（'/ assets /'）。调整范围，移动服务工作者   脚本，或使用Service-Worker-Allowed HTTP标头来允许   范围。

尝试解决，第二次尝试：

如果我尝试将webpack配置更改为：

new SWPrecacheWebpackPlugin({
   cacheId: 'my-project',
   filename: '../service-worker.js', // Adding ../ on front
   directoryIndex: false,
   minify: true,
   runtimeCaching,
}),

现在我可以在文件前面没有/assets的情况下直接注册，因为它是在/public内创建的：

navigator.serviceWorker
  .register('/service-worker.js', { scope: './' });

现在，使用DevTools进行检查，我可以看到范围现在是正确的：

localhost:3000/this_is_the_part_with_react

但是，服务工作者收到此错误：

网络中的所有资源都因404 error而失败，因为前面缺少/assets。

问题2

在localhost:3000/assets中的服务工作者下，它没有缓存请求（runtimeCaching配置），并且应用程序无法脱机工作。

可能是与范围的第一个问题相关的问题......

但是我在fetch事件中添加了console.log，该事件位于创建的service-worker.js文件中，并且永远不会执行。

结论

嗯，如果有人可以帮我解决我解释的这两个问题（可能是同一个问题），那将会很棒：

• 范围问题
• 缓存请求的问题，并在离线模式下使用该应用。

非常感谢你！