Angular 8集成Service Worker后，缓存更新代码应添加至何处？

你不需要新建文件，把这段更新逻辑直接放到根组件AppComponent里即可，具体操作如下：

1. 打开src/app/app.component.ts文件
2. 先导入SwUpdate模块：

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

3. 在组件类中注入SwUpdate，并添加版本监听逻辑，同时实现promptUser提示函数（原代码中调用了这个函数，需要你补充实现）：

export class AppComponent {
  constructor(private updates: SwUpdate) {
    this.checkForUpdates();
  }

  checkForUpdates() {
    if (this.updates.isEnabled) {
      this.updates.available.subscribe(event => {
        if (this.promptUser(event)) {
          this.updates.activateUpdate().then(() => document.location.reload());
        }
      });
    }
  }

  private promptUser(event: any): boolean {
    // 这里实现自定义的用户提示逻辑，比如弹出确认框
    return confirm(`发现新版本 v${event.currentAppData.version} → v${event.availableAppData.version}，是否立即更新？`);
  }
}

4. 确认AppModule配置正确（ng add命令已自动配置，可检查一下）：
   打开src/app/app.module.ts，确保imports数组中有以下配置：

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

@NgModule({
  imports: [
    // ...其他模块
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ]
})

确保environment.production在生产环境下为true，这样Service Worker只会在生产构建时启用。

额外注意事项 #

• 发布新版本时，Angular的Service Worker会通过对比ngsw.json文件检测更新，确保构建时生成的ngsw.json被正确部署到服务器
• 可在ngsw-config.json中调整缓存策略，比如配置assetsGroups控制静态资源的缓存规则，避免不必要的资源被长期缓存

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