3

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

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

重现步骤：

  • 停止服务人员
  • 删除所有缓存
  • 第一页重新加载 - 我的网页已加载并安装了 service worker
  • 第二页重新加载 - 有时我在这里收到一个看起来像这样的错误GET https://dev-host.com/client/build/_/12.js net::ERR_CONNECTION_RESET 200 (OK)

浏览器中会发生什么：

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

网络面板

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

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

文件请求通过服务工作者

最后，初始请求失败： 请求失败

这是我的服务工作者脚本的样子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, {});

知道这里发生了什么吗？

4

0 回答 0