硬刷新后注册 Service Worker

Question

每当带有 Service Worker 的 Web 应用程序在硬刷新后重新加载时（Ctrl + F5例如，对于 Chrome），Service Worker 之后将无法注册。

根据W3C的文档

注意：如果请求是强制刷新（shift+refresh），navigator.serviceWorker.controller 将返回 null。从此属性 getter 返回的表示同一 Service Worker 的 ServiceWorker 对象是相同的对象。

那么，问题来了：硬刷新完成后，真的不可能立即注册Service Worker吗？我正在使用 来检查 Service Worker 是否存在navigator.serviceWorker.controller。请参阅随附的 GIF，其中显示了与https://googlechrome.github.io/samples/service-worker/basic/页面的交互

Answer 1

阻止硬刷新似乎很难，但您可以检测到应该使用工作人员但当前尚未使用。然后您可以使用它重新加载。

navigator.serviceWorker.getRegistration().then(function(reg) {
  // There's an active SW, but no controller for this tab.
  if (reg.active && !navigator.serviceWorker.controller) {
    // Perform a soft reload to load everything from the SW and get
    // a consistent set of resources.
    window.location.reload();
  }
});

Answer 2

这是一个非常复杂的故事，这里的漫长道路是：

这实际上是 Service Worker 的一个规范。并且仅在最近的 Chrome 更改中出现。对于早期版本的 Chrome ，Service Worker 在“强制刷新”后没有任何问题。

这意味着，只有在最近的 Chrome 更改中，问题仍然存在。在早期版本中它没有持续存在，这暗示了 chrome 的问题。此报价截至 2016 年-此后的所有版本都会受到相同的影响，只有早期版本不会出现此问题。

有开发人员建议force refresh或hard refresh 应该始终清除所有类型的缓存。这与其存在的目的和规格相匹配——但是我个人认为这种匹配是值得商榷的。

解决方案：

您将能够使用 js 插件来检测 Ctrl 或 Shift 的按键...然后防止“强制刷新”发生。

这是迄今为止处理该问题的最佳、最简单的解决方案。