Question

热门问题How do I uninstall a Service Worker?对于使用JavaScript取消注册服务工作者有一个很好的答案。如何取消注册时，如何让服务工作者清除任何命名的缓存？

从MDN unregister，服务工作人员将在未注册之前完成任何正在进行的操作。因此，听起来应该可以监听uninstall事件，但不存在此类事件as far as I can tell。对于咯咯笑，我尝试将self.addEventListener('uninstall', ...)添加到服务工作者，但正如预期的那样，它不会在取消注册时触发。我也试着听取可能在取消注册时发送的任何message ...没有骰子。

我还考虑过观看service worker state，但installing，installed，activating，activated和redundant都不相关。更不用说，它看起来不像传递给服务工作者的消息是可能的，所以我不确定我在服务工作者之外对uninstalling状态做了什么。

到达吸管，虽然我看到uninstalling flag的引用，但我没有看到它暴露在任何地方。建议？

Answer 1

以下代码应取消注册所有服务工作者并清除Cache Storage 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 header是另一个选项，可以在一个操作中“强制”清除所有内容（服务工作者注册，缓存等）。

Answer 2

这可以通过消息传递来完成。我更喜欢Jeff Posnick的答案的一个原因是，不需要在服务工作者之外知道缓存的名称。在服务工作者中，添加消息监听器：

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

然后messageHandler()可以对各种传递的消息采取措施。例如：

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 unregister，“服务工作人员将在未注册之前完成任何正在进行的操作。”

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

2 个答案: