使用 Angular Service Worker 时如何在注销后清除 api 的响应缓存？

Question

我使用 Angular 生成的 Service Worker 缓存 api 的响应，现在我想在用户决定注销后清除这些缓存，我创建了新的自定义 Service Worker 文件，该文件侦听来自 Angular 应用程序的消息，然后尝试清除缓存，但是为了检查当我将浏览器置于离线模式并刷新页面时，我仍然可以看到缓存的数据，现在我有问题如何才能完全清除它们？

这是我的定制服务人员：

importScripts('./ngsw-worker.js')
self.addEventListener('message', async event => {
    const cacheNames = await self.caches.keys()
    for (let name of cacheNames) {
         await self.caches.delete(name)
    }
    console.log('All caches deleted.')
})

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

尝试使用 self.skipWaiting() 和 self.clients.claim() 以确保最新的 Service Worker 立即接管控制权。

importScripts('./ngsw-worker.js');

self.addEventListener('install', (event) => {
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('message', async (event) => {
  if (event.data && event.data.type === 'CLEAR_CACHE') {
    await clearAllCaches();
    console.log('All caches deleted.');
  }
});

async function clearAllCaches() {
  const cacheNames = await self.caches.keys();
  for (let name of cacheNames) {
    await self.caches.delete(name);
  }
}

• 注销时触发缓存清除〜从 Angular 应用程序发送到专门用于注销的 Service Worker 的消息

navigator.serviceWorker.controller?.postMessage({ type: 'CLEAR_CACHE' });