2

我在尝试使用使用sw-precache-webpack-plugin v.0.11.4的服务添加缓存系统时遇到了一些麻烦。我的想法是人们可以离线使用该应用程序。

我的应用程序位于React v.15.5.4和Node v.6.9.5中，但车把中有一些部分（我们正在迁移到 React 的旧平台），此时两者都在一起。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 进行检查，我可以看到 service worker 是如何注册的，但没有问题：

localhost:3000/assets

试图解决，首先尝试：

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

DOMException: 无法注册 ServiceWorker: 提供的范围 ('/this_is_the_part_with_react') 的路径不在允许的最大范围 ('/assets/') 之下。调整范围，移动 Service Worker 脚本，或者使用 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

但是，服务人员收到此错误：

ServiceWorker 开发工具中的错误

并且网络中的所有资产都失败了，404 error因为缺少/assets前面。

问题 2

在 中的 service worker 下localhost:3000/assets，它没有缓存请求（runtimeCaching 配置），并且应用程序没有离线工作。

也许与范围的第一个问题相关的问题相同......

但是我console.log在创建的文件内的 fetch 事件中添加了一个service-worker.js，这永远不会执行。

结论

好吧，如果有人可以帮助我解决我解释的这两个问题（这可能是同一个问题），那就太好了：

  • 范围问题
  • 缓存请求出现问题并在离线模式下使用应用程序。

太感谢了！

4

0 回答 0