Angular10+PWA 部署更新后如何自动刷新站点兼顾缓存与最新版本？

先纠偏你之前踩的两个认知误区 #

• 你觉得“哈希命名需要pm2适配新文件名”完全是误解：pm2本身只是Node进程管理器，根本不需要感知静态资源的文件名变化。之前你卡住的原因大概率是在Express路由或者HTML里硬编码了带哈希的JS文件路径，才会觉得要改pm2配置才能加载新文件——实际上Express只要把静态资源根目录指到Angular打包生成的dist固定路径，不管里面的JS文件名哈希怎么变，服务都能正常返回对应文件，根本不需要额外适配。
• 你觉得“要禁所有缓存才能更新版本”也走偏了：缓存策略完全可以按文件粒度分层配置，根本不需要全量禁用，既不会损失性能，也不会出现旧版本残留。

具体分层配置步骤 #

1. Express 静态资源缓存规则分层配置 #

不要全量禁缓存，按文件属性匹配差异化策略：

• 对所有带哈希后缀的打包产物（Angular生成的main.xxxx.js、styles.xxxx.css、带哈希的字体/媒体资源）：设置响应头Cache-Control: public, max-age=31536000, immutable。这类文件内容一旦生成就不会变化，就算永久缓存也不会有版本冲突风险，能最大程度发挥缓存性能优势。
• 对不带哈希的入口类文件（index.html、sw.js、manifest.webmanifest）：设置响应头Cache-Control: no-cache, no-store, must-revalidate。这类文件是版本入口，每次请求都要从服务器拿最新内容，从根源上避免浏览器把旧的入口HTML缓存住，进而加载旧的JS资源。
• 配完之后你会发现，pm2全程不需要做任何配置改动，只要部署时把新的dist目录内容替换到固定静态路径下，新的index.html会自动引用最新的哈希文件，服务就能正常响应。

2. Angular PWA 侧的更新机制补全 #

很多人装完@angular/pwa包就完事，没做版本检测逻辑，这也是旧版残留的重灾区：

• 在angular.json中把service worker的注册策略设为registerImmediately，避免延迟注册导致的旧SW残留
• 在应用根组件注入SwUpdate服务，做两个定时检测逻辑：
  • 页面每次完成路由跳转时，检测一次是否有新版本
  • 应用前台运行时，每小时后台检测一次新版本
• 检测到新版本时不要直接强制刷新打断用户操作，弹一个轻量提示告知用户“站点已更新，点击刷新加载最新版本”，等用户确认后调用activateUpdate()方法激活新的service worker，再自动重载页面即可。
• 同步调整service worker内置的缓存策略：带哈希的静态资源走缓存优先策略，index.html、sw.js走网络优先策略，和Express端的缓存规则对齐。

3. pm2部署流程的兜底优化 #

为了避免部署过程中出现半更新状态导致用户拿错乱的资源，调整下你的部署逻辑：

• 每次打包生成的新版本，单独存到带版本号的独立目录下，比如/opt/site/build/v1.0.12/
• 维护一个固定路径的软链，比如/opt/site/current，Express端的静态资源路径就指到这个软链上
• 部署时先把新的版本目录准备好，确认文件完整性后，一次性把软链切换到新版本目录，整个过程没有文件替换的中断期
• 软链切换完成后，执行一次pm2 reload <你的服务名>平滑重启进程，不需要强杀进程影响线上可用性

避坑提醒 #

• 绝对不要在HTML或者代码里硬编码任何带哈希的静态资源引用，所有带哈希的资源路径全交给Angular打包工具自动生成
• 不要把sw.js文件设置长缓存，这个文件是service worker的版本判定入口，一旦被长缓存住，浏览器永远不会主动检测新版本，就算页面更新了用户也收不到更新提示
• 不要为了图省事把所有资源都设为no-cache，带哈希的资源长缓存能把二次访问的加载速度提升60%以上，没有任何必要禁用

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