使用Angular Service Worker时，如何在登出后彻底清除API响应缓存？

你的问题出在只删除了Cache Storage里的缓存，但Angular的NGSW（NgServiceWorker）还会用IndexedDB存储缓存的元数据和索引，只清Cache Storage的话，NGSW可能会重新恢复缓存，或者依然认为旧缓存有效，导致离线刷新还能看到旧数据。下面是完整的解决方案：

1. 确保应用端正确发送清除缓存的消息 #

在你的登出逻辑里，通过Angular的SwUpdate服务给SW发送指定动作的消息：

import { SwUpdate } from '@angular/service-worker';

// 在组件/服务中注入SwUpdate
constructor(private swUpdate: SwUpdate) {}

logout() {
  // 执行你的登出逻辑（比如清除本地存储、token等）
  localStorage.removeItem('authToken');

  // 若SW已启用，发送清除缓存的消息
  if (this.swUpdate.isEnabled) {
    this.swUpdate.postMessage({ action: 'clearCaches' });
  }
}

2. 修改自定义Service Worker，同时清除Cache和IndexedDB #

更新你的自定义SW，除了删除所有缓存，还要清除NGSW使用的IndexedDB存储，并通知客户端刷新：

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

self.addEventListener('message', async (event) => {
  // 只处理指定的清除缓存动作
  if (event.data?.action !== 'clearCaches') return;

  // 步骤1：删除所有Cache Storage中的缓存
  const cacheNames = await self.caches.keys();
  await Promise.all(cacheNames.map(cacheName => self.caches.delete(cacheName)));

  // 步骤2：清除NGSW维护的IndexedDB存储（前缀为ngsw:）
  const indexedDBs = await indexedDB.databases();
  indexedDBs.forEach(db => {
    if (db.name.startsWith('ngsw:')) {
      indexedDB.deleteDatabase(db.name);
    }
  });

  // 步骤3：通知客户端页面刷新，确保后续请求不使用旧缓存
  if (event.source) {
    event.source.postMessage({ action: 'cacheCleared' });
  }

  console.log('缓存及NGSW元数据已完全清除');
});

3. 应用端监听SW的回复，触发页面刷新 #

在应用中监听SW的回复，收到缓存清除完成的消息后刷新页面，确保当前页面脱离旧SW的控制：

// 在组件或核心服务中
constructor(private swUpdate: SwUpdate) {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.messages.subscribe(message => {
      if (message.action === 'cacheCleared') {
        // 刷新页面，加载全新内容
        window.location.reload();
      }
    });
  }
}

关键说明 #

• NGSW依赖IndexedDB存储缓存的版本、索引和有效性信息，只删Cache Storage无法彻底让NGSW放弃旧缓存，必须同时清除对应的IndexedDB数据库。
• 页面刷新是必要的：当前页面仍由旧SW控制，刷新后会重新加载，确保后续请求不会读取残留的缓存数据。
• 测试时请使用生产模式（ng build --prod），开发模式下Angular的SW可能不会正常缓存API响应。

内容的提问来源于stack exchange，提问作者mehranmb78