在服务工作者提供的js / css文件上获取net :: ERR_CONNECTION_RESET 200(确定)

时间:2019-01-22 08:11:56

标签: caching workbox workbox-webpack-plugin

UPD 22.02.2019 https://bugs.chromium.org/p/chromium/issues/detail?id=934386

我正在广泛测试缓存服务工作者,有时确实会收到服务工作者提供的js / css文件的net::ERR_CONNECTION_RESET 200 (OK)错误。
我正在使用 Workbox 3.6.3

复制步骤:

  • 停止服务人员
  • 删除所有缓存
  • 重新加载首页-已加载我的网页并安装了Service Worker
  • 第二页重新加载-有时我在这里遇到如下所示的{strong>错误:GET https://dev-host.com/client/build/_/12.js net::ERR_CONNECTION_RESET 200 (OK)

浏览器中会发生什么:

  • 我的脚本通过创建的script标签加载,并插入到网页的head标签中。所有这些都是通过requireEnsure函数从webpack-https://gist.github.com/chestozo/acd651382f9590988d4679f8dbb21d19生成的manifest.js脚本中完成的。
  • 正如我所见,脚本请求被执行脚本提取并将其存储在缓存中的服务工作者截获
  • 然后我可以看到初始请求需要一段时间,然后失败

Network panel

  • script标签发起的第一个请求被插入head
  • 第二个请求-由服务人员完成;成功

在这里您可以看到文件请求被工作箱拦截:

File request goes via service worker

最后,初始请求失败: Request failure

这就是我的服务工作者脚本的样子,sw.js

workbox.skipWaiting();
workbox.clientsClaim();

workbox.routing.registerRoute(
    new RegExp(reRuntimeStatic),
    workbox.strategies.cacheFirst({
        cacheName: CACHE_NAMES.STATIC,
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [ 200 ]
            }),
            new workbox.expiration.Plugin({
                maxAgeSeconds: 5 * 60 * 60 * 24,
                maxEntries: 100
            })
        ]
    }),
    'GET'
);

self.__precacheManifest = [].concat(cacheConfig.precache || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

有什么想法吗?

0 个答案:

没有答案