Angular Service Worker如何实现无刷新静默无缝升级？

问题1：Angular是否支持Service Worker静默升级？ #

原生Angular Service Worker默认的升级流程需要页面重载才能让新版应用完全生效，但支持静默激活新的Service Worker，不需要用户操作。默认逻辑下新Service Worker会等待已打开的页面全部关闭/刷新才会接管请求，你可以通过API主动触发激活，实现后台静默升级。

问题2：是否可以自定义实现无感知无刷新的平滑升级？ #

可以实现，根据你的业务场景有两种处理方案：

方案1：轻量静默升级（适用绝大多数场景） #

如果你的升级不需要用户当前打开的页面立刻切换到新版逻辑，仅需要后续新请求/新打开的页面使用新版，直接修改现有检测逻辑，去掉用户提示和刷新操作即可：

runNewAppVersionNotifier() {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.available.subscribe(() => {
      // 后台静默激活新Service Worker
      this.swUpdate.activateUpdate().then(() => {
        const hostname = window.location.hostname;
        const cookieStorage = new CookieStorage({ 
          domain: hostname === "localhost" ? "localhost" : ".jepto.com", 
          secure: hostname !== "localhost", 
          path: "/" 
        });
        cookieStorage.clear();
        // 可新增自定义逻辑，比如向业务模块发送升级完成通知
      });
    });
  }
}

该方案下用户完全感知不到升级过程，当前页面的操作不受影响，后续新发起的网络请求会由新的Service Worker处理，用户下次刷新页面时自然加载完整新版应用。

方案2：当前页面无刷新同步更新（适用强需求场景） #

如果需要当前打开的页面也立刻切换到新版逻辑，需要在应用架构层面做额外适配：

• 激活新Service Worker后，通过动态加载的方式拉取新版的前端业务代码
• 用Angular动态组件能力替换当前内存中运行的旧版组件
  该方案复杂度较高，需要你根据业务需求评估投入成本，Angular本身没有内置对应的全量热更能力，需要自行扩展实现。

注意事项 #

• 静默激活后，当前页面已经加载到内存中的JS、CSS、DOM内容不会更新，只有新的网络请求会走新Service Worker的缓存规则
• 如果你需要扩展Service Worker的原生逻辑，可以基于Angular生成的ngsw-worker.js做自定义修改，适配特殊的缓存和升级规则

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