javascript - 如何让 ServiceWorker 在缓存重置/Shift+F5 后存活下来？

Question

我想创建一个即使服务器离线也能正常工作的网站 — 我发现这就是 ServiceWorkers是为了。

当我使用 Service Worker 重新加载页面但没有连接时，它工作正常。但是，shift+reload(例如绕过缓存)会解除 service worker 的武装，我会收到“无法连接到服务器”错误。

我的问题是——我能否以某种方式防止 shift+reload(shift+f5、ctrl+f5 等)破坏 service worker，或者至少在不恢复连接的情况下使其恢复？

Answer 1

通过以下方法，即使在 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();
    }
};

简而言之，我们要求 service worker 再次声明所有客户端，这甚至适用于使用 Ctrl+F5 的客户端。

如果您想在 Service Worker 代码中使用 Ctrl+F5，您可以:

1. 在声明之前清除缓存。请注意，这也会影响任何其他现有的客户端，这可能是不需要的。
2. 做一些更复杂的事情，例如发送请求 Ctrl+F5 的客户端的 ID，并专门处理此类客户端的提取请求。