如何使ServiceWorker在缓存重置/移位F5中存活？

Question

我想创建一个网站，即使当它的服务器离线时也可以工作——我发现这就是服务工人的目的。

当我重新加载带有service worker且没有连接的页面时，它工作正常。但是，轮班重新加载（例如，绕过缓存）会解除服务工作人员的防护，并出现“无法连接到服务器”错误。

我的问题是-我是否可以以某种方式防止轮班重新加载（shift f5、ctrl f5等）破坏服务人员，或者至少在不恢复连接的情况下使其恢复？

Answer 1

如何使ServiceWorker在缓存重置/移位F5中存活？

从理论上讲（*），你可以用js插件来检测按下Ctrl或Shift键的情况。。。然后防止“强制刷新”发生

...但是在这个Ctrl/Shiftreload的背后有一个故事。

（*）免责声明：我还没有试过

这实际上是一个服务工作者规范。并且只存在于最近的Chrome变化中。对于Chrome的早期版本，Service Worker在“强制刷新”中没有任何问题。

连同W3C的规格

navigator.serviceWorker.controller返回null，如果请求是强制刷新（移位刷新）。

此外，有许多人（**）建议“强制刷新”应始终清除所有类型的缓存。这与其存在的目的和规格相匹配。

...此外，我们甚至在维基百科上看到了它。。。

维基百科：绕过缓存意味着强迫你的浏览器从头开始重新html" target="_blank">下载网页

（**）我们，网站开发人员的早期服务工作者。

在我看来，我认为让一支力量刷新它的工作是可以的。因为当我们这样做的时候，几乎所有人都希望浏览器不使用任何缓存。

Answer 2

通过以下方法，即使在按住Ctrl键F5键之后，我仍然能够继续使用service worker：

在窗口脚本中：

navigator.serviceWorker.register(<...>).then (registration => {
    if (navigator.serviceWorker.controller === null) {
        // we get here after a ctrl+f5 OR if there was no previous service worker.
        navigator.serviceWorker.ready.then(() => {
            registration.active.postMessage("claimMe");
        });
    }
    <...>
});

在服务脚本中：

self.onmessage = (event) => {
    if (event.data === "claimMe") {
        self.clients.claim();
    }
};

简而言之，我们要求服务工作者再次声明所有客户端，这甚至适用于使用Ctrl F5的客户端。

如果要遵守服务人员代码中的Ctrl F5，可以：

1. 在声明之前清除缓存。请注意，这也会影响可能不需要的任何其他现有客户端