Angular Service Worker - 新链接

Question

假设您有一个带有以下路由器链接的应用程序 v2.0 的部署版本：

const routes: Routes = [
  {
    path: "home",
    loadChildren: () =>
      import("src/main/home.module").then((m) => m.HomeModule),
  },
  { path: "**", component: 404Component },
];

然后，当您添加新的路由器链接并部署 v2.1 时：

const routes: Routes = [
  {
    path: "home",
    loadChildren: () =>
      import("src/main/home.module").then((m) => m.HomeModule),
  },
  {
    path: "test",
    loadChildren: () =>
      import("src/main/test.module").then((m) => m.TestModule),
  },
  { path: "**", component: 404Component },
];

该应用程序使用 Service Worker，因此之前访问过的用户将拥有版本 2.0缓存。

现在，如果我向一些老用户分享链接，例如：mywebsite.com/test，那么老用户将获得 404 页面，30 秒后如果用户仍在该页面上，版本 v2.1在后台下载，应用程序刷新并显示正确的页面（TestModule）。

以下是我的 Service Worker 片段：

注册

ServiceWorkerModule.register("ngsw-worker.js", {
  enabled: ENV.production,
  registrationStrategy: "registerImmediately",
}),

ngsw-worker.js

{
      "$schema": "./node_modules/@angular/service-worker/config/schema.json",
      "index": "/index.html",
      "assetGroups": [
        {
          "name": "app",
          "installMode": "prefetch",
          "resources": {
            "files": [
              "/favicon.ico",
              "/index.html",
              "/manifest.webmanifest",
              "/*.css",
              "/*.js"
            ]
          }
        }, {
          "name": "assets",
          "installMode": "lazy",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/assets/**",
              "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        }
      ]
    }

检查更新：

export class UpdateService {

  constructor(public updates: SwUpdate) {
    if (updates.isEnabled) {
      interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate())
    }
  }

  public checkForUpdates(): void {
    this.updates.available.subscribe(event => {
      this.promptUser();
    });
  }

  private promptUser(): void {
    this.updates.activateUpdate().then(() => document.location.reload()); 
  }
}

有什么办法强制使用新版本吗？

Answer 1

据我所知，不幸的是，没有办法在应用程序加载时强制更新，但您可以缩短 30 秒的等待时间。在您的构造函数中，使用计时器而不是间隔，它将立即检查更新。因此您的应用程序将在 5 秒左右更新。