取消注册时如何清除服务工作者缓存？

Question

常见问题：如何卸载Service Worker？对于使用JavaScript注销服务工作人员有一个很好的答案。如何让服务工作者在注销时清除任何命名缓存？

从MDN注销，服务工作人员将在注销之前完成任何正在进行的操作。因此，听起来应该可以监听卸载事件，但据我所知，不存在此类事件。对于傻笑，我尝试添加self。addEventListener（'卸载'，…）发送给服务工作者，但正如预期的那样，在注销时不会触发。我还尝试监听任何可能在注销时发送的消息。。。没有骰子。

我还考虑观察Service Worker状态，但是没有一个安装，安装，激活，激活和冗余出现相关。更不用说，看起来消息传递给服务工作者是不可能的，所以我不确定从服务工作者外部卸载状态会做什么。

伸手去抓稻草，虽然我看到了卸载标志的引用，但我还没有看到它暴露在任何地方。建议？

Answer 1

这可以通过消息传递来实现。与Jeff Posnick的答案相比，我更喜欢这个答案的一个原因是缓存的名称不需要在服务人员之外知道。在service worker中，添加消息侦听器：

self.addEventListener('message', (event) => {
    messageHandler(event);
});

然后，可以对传递的各种消息执行操作。例如：

function messageHandler(event) {
    if (event.data === 'purge_cache') {
        caches.delete('mycache')
        .then((success) => {
            console.log("Cache removal status: " + success);
        })
        .catch((err) => {
            console.log("Cache removal error: ", err);
        });
    }
}

若要触发此操作，请将脚本中的消息发布到服务工作人员范围内的页面上。因此，对于如何删除缓存然后注销服务工作人员的原始问题，您可以这样做：

navigator.serviceWorker.getRegistration()
.then((registration) => {
    registration.active.postMessage('purge_cache');
    registration.unregister()
    .then((success) => {
        console.log('Service worker unregistration status: ' + success);
    })
    .catch((err) => {
        console.log('Service worker unregistration failed', err);
    });
})
.catch((err) => {
    console.log('Service worker registration not found.');
});

注意，我没有等待来自postMessage（'purge_cache'）的成功回复；从MDN注销，“服务工作者将在注销之前完成任何正在进行的操作。”

Answer 2

以下代码应注销所有服务工作人员，并清除缓存存储API中的所有原始内容：

async function unregisterAndClearCaches() {
  const registrations = await navigator.serviceWorker.getRegistrations();
  const unregisterPromises = registrations.map(registration => registration.unregister());

  const allCaches = await caches.keys();
  const cacheDeletionPromises = allCaches.map(cache => caches.delete(cache));

  await Promise.all([...unregisterPromises, ...cacheDeletionPromises]);
}

使用Clear-Site-Data标头是另一个选项，用于强制清除所有内容（服务工作人员注册、缓存等）。）在一个操作中。