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 },
];

該應用程序使用服務工作者，因此之前訪問過的用戶將緩存 2.0 版。

現在，如果我將鏈接分享給一些老用戶，例如： mywebsite.com/test ，那么老用戶將獲得 404 頁面，30 秒后，如果用戶仍在該頁面上，則在后台下載 v2.1 版本，並且應用程序刷新並顯示正確的頁面 (TestModule)。

以下是我的服務人員片段：

登記

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 秒左右更新。