Chrome 85 服务工作者卡在尝试安装

Question

我的 Web 应用程序 chrome 85 更新后，Service Worker 不再安装。它在 chrome 84 或更早版本、Safari、Firefox、Microsoft Edge 浏览器上运行良好。

试图找到变更日志或错误报告，但没有明确的提示可以阻止它。等待很长时间后，Service Worker 最终出现错误 (1)，在控制台中，我看到许多请求的状态为 pending/stalled。

但是那些 url 处于待定状态的具有路径信息而不是静态资源，例如：

转载：

1.Register a service worker with global scope

  navigator.serviceWorker.register('/ServiceWorker.js', { scope: '/', updateViaCache: 'none' }).then(function (registration) {
});

2. Attach install event which looks like

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(
        [
          '/css/bootstrap.css',
          '/css/main.css',
          '/js/bootstrap.min.js',
          '/js/jquery.min.js',
          '/offline.html',
          '/path/subpath/par1/par2'
          '/path/subpath/par1/par3'
          '/path/subpath1/par4/par5'
        ]
      );
    })
  );
});

3. Following request url (non static resources) will never complete and install will stuck on trying to install and eventully, in error/redudndant.

'/path/subpath/par1/par2'
'/path/subpath/par1/par3'
'/path/subpath1/par4/par5'

这些是我能注意到的唯一发现。

有线索吗？ chrome 85 service worker / Fetch api 中的更改可能导致此行为。

Answer 1

所以在尝试了各种方法之后，我开始查看 chromium 浏览器的源代码，发现出于某种原因，请求限制在安装 service worker 时默认启用，而且最多 3 个请求。

在我们的案例中，这种限制导致请求进入停滞状态并停留在尝试安装状态并最终以冗余错误告终。

没有可用于禁用节流的标志，所以我决定使用 cache.add 而不是 cache.addAll 处理所有的承诺，瞧，它起作用了。似乎这样不会达到最大并发请求，安装可以继续。

无法报告有关 chromium 的错误，但希望某些项目成员可以调查它，至少即使他们限制了它，也可以使其恢复。

暂时希望对其他人有所帮助。

Answer 2

我发现了同样的问题并确认使用“cache.addAll”限制 3 个请求的限制。

好像跟缓存控制有关。从 Cache-Control.

中删除“no-store”选项后，我解决了这个问题

之前：

Header set Cache-Control "no-cache, no-store, must-revalidate"

Chrome85 之后：

Header set Cache-Control "no-cache, must-revalidate"

Chrome 85 服务工作者卡在尝试安装

Chrome 85 Service worker stuck on trying to install

javascript

google-chrome

service-worker

fetch-api