Angular 12 service worker Sw 更新未觸發

Question

在我的 angular 應用程序中，我試圖實現一個服務工作者來更新應用程序而無需用戶交互。

這是我正在遵循的程序

1. 對應用程序進行一些更改。

2. 運行構建

3. 使用http-server -p 8080 -c-1 <dist dir>啟動 HTTP 服務器

預期 output

應用程序應該有自動刷新

這是我的update-service

export class CheckforUpdateService {

  constructor(public updates: SwUpdate) { 
    if (updates.isEnabled) {
      interval(10*1000).subscribe(() => updates.checkForUpdate()
        .then(() => console.log('checking for updates')));
    }
  }
  public checkForUpdates(): void {
    console.log('inside')
    this.updates.available.subscribe(event => {
      console.log('avaliable',event)
      this.promptUser()
    }
     );
  }

  private promptUser(): void {
    console.log('updating to new version');
    this.updates.activateUpdate().then(() =>{
      console.log('reloading....')
      document.location.reload()
   
    }); 
  }
}

在 app-component.ts 我正在調用更新服務方法checkForUpdates()

constructor(private sw: CheckforUpdateService,
    public updates: SwUpdate){
    this.sw.checkForUpdates();

    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
    });
    updates.activated.subscribe(event => {
      console.log('old version was', event.previous);
      console.log('new version is', event.current);
    });
  }

但問題是即使我嘗試使用新版本， this.updates.available.subscribe也不會觸發

在服務工作者調試中，我可以看到以下日志

NGSW Debug Info:

Driver version: 12.2.13
Driver state: NORMAL ((nominal))
Latest manifest hash: d8544c70ccf2d16b487d9ae9ed5f030f946422ba
Last update check: never

=== Version c98cdb909763ddcaa995211951398713e5c081fe ===

Clients: 5c90f84b-45b2-41df-9d08-de009e17f365

=== Version d8544c70ccf2d16b487d9ae9ed5f030f946422ba ===

Clients: c309b1c6-9143-4471-aab6-c721697bd9b6, f5fae64a-8aa6-4140-954c-405fb76f286b

=== Idle Task Queue ===
Last update tick: 300u
Last update run: never
Task queue:
 * init post-load (update)
 * init post-load (cleanup)

Debug log:

同樣在網絡選項卡上，我可以看到一些請求失敗

這是上述請求的堆棧跟蹤

anonymous) @ http://localhost:8080/ngsw-worker.js:2925
(anonymous) @ http://localhost:8080/ngsw-worker.js:34
__awaiter @ http://localhost:8080/ngsw-worker.js:20
safeFetch @ http://localhost:8080/ngsw-worker.js:2923
(anonymous) @ http://localhost:8080/ngsw-worker.js:2579
(anonymous) @ http://localhost:8080/ngsw-worker.js:34
__awaiter @ http://localhost:8080/ngsw-worker.js:20
fetchLatestManifest @ http://localhost:8080/ngsw-worker.js:2578
(anonymous) @ http://localhost:8080/ngsw-worker.js:2680
(anonymous) @ http://localhost:8080/ngsw-worker.js:34
__awaiter @ http://localhost:8080/ngsw-worker.js:20
checkForUpdate @ http://localhost:8080/ngsw-worker.js:2677
(anonymous) @ http://localhost:8080/ngsw-worker.js:2195
(anonymous) @ http://localhost:8080/ngsw-worker.js:34
__awaiter @ http://localhost:8080/ngsw-worker.js:20
(anonymous) @ http://localhost:8080/ngsw-worker.js:2194
(anonymous) @ http://localhost:8080/ngsw-worker.js:2196
(anonymous) @ http://localhost:8080/ngsw-worker.js:34
__awaiter @ http://localhost:8080/ngsw-worker.js:20
handleMessage @ http://localhost:8080/ngsw-worker.js:2192
(anonymous) @ http://localhost:8080/ngsw-worker.js:2149
fulfilled @ http://localhost:8080/ngsw-worker.js:22
step @ http://localhost:8080/ngsw-worker.js:33
(anonymous) @ http://localhost:8080/ngsw-worker.js:34
__awaiter @ http://localhost:8080/ngsw-worker.js:20
(anonymous) @ http://localhost:8080/ngsw-worker.js:2136
onMessage @ http://localhost:8080/ngsw-worker.js:2150
(anonymous) @ http://localhost:8080/ngsw-worker.js:2057

Angular 版本：12

NG CLI 版本：12.2.13

Answer 1

你可以這樣做 angular 13

 import { SwUpdate, VersionReadyEvent } from "@angular/service-worker";
    constructor(private serviceWorkerUpdate: SwUpdate) {} 
    ngOnInit() {
    if (this.serviceWorkerUpdate.isEnabled) {
       this.serviceWorkerSubscription =
        this.serviceWorkerUpdate.versionUpdates.pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY')).subscribe(() => { 
         location?.reload();
        });
      }
    }