Angular PWA：如何禁止Service Worker缓存index.html

核心问题分析 #

你已经把index.html从assetGroups里移除，也加了navigationRequestStrategy: "freshness"配置，但Service Worker还是会缓存主文档——这是因为Angular SW的freshness策略默认会优先尝试用缓存，只有缓存过期或请求失败才会回源；而且如果用户浏览器里已经存了旧的index.html缓存，新配置不会自动清除旧缓存。

可行解决方案 #

方案1：修改SW配置，彻底绕过index.html的缓存逻辑 #

在ngsw.config.js里补充navigationUrls配置，让导航请求完全跳过SW的缓存判断：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "navigationRequestStrategy": "freshness",
  // 新增配置：先排除所有导航请求，再重新包含，强制走服务器
  "navigationUrls": [
    "!/**",
    "/**"
  ],
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}

方案2：清除用户端旧缓存 #

如果之前已经部署过带index.html缓存的版本，需要在新SW里主动清理旧缓存，避免用户端残留的旧缓存干扰：
在app.module.ts中注册SW时加入缓存清理逻辑：

import { ServiceWorkerModule, SwUpdate } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
})
export class AppModule {
  constructor(swUpdate: SwUpdate) {
    swUpdate.versionUpdates.subscribe(event => {
      if (event.type === 'VERSION_READY') {
        // 清除所有旧缓存
        caches.keys().then(keys => {
          keys.forEach(key => caches.delete(key));
        });
        // 不用强制刷新，用户下次正常刷新就会拉取新的index.html
      }
    });
  }
}

方案3：补全Nginx响应头配置 #

确保Nginx针对index.html发送完整的禁用缓存头，避免浏览器层面的缓存干扰：

location = /index.html {
  add_header Cache-Control "no-cache, no-store, must-revalidate";
  add_header Pragma "no-cache";
  add_header Expires "0";
}

验证步骤 #

修改配置后重新构建部署，按以下步骤验证：

• 打开浏览器开发者工具的「Application」标签，找到「Service Workers」，点击「Unregister」清除旧SW
• 刷新页面，查看「Network」标签里index.html的请求来源，应该显示「Server」而非「ServiceWorker」

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