Angular 12 服务工作者 Sw 更新未触发

Question

在我的 Angular 应用程序中，我正在尝试实现一个服务工作者来更新应用程序而无需用户交互。

这是我正在遵循的程序

1. 对应用程序进行一些更改。

2. 运行构建

3. 用http-server -p 8080 -c-1 <dist dir>启动一个HTTP服务器

预期输出

应用程序应该自动刷新

这是我的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 中，我调用了 update-service 方法 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

角度版本：12

NG CLI 版本：12.2.13

Answer 1

您可以参考以下链接。在较新版本中，角社区已弃用 SwUpdate 类的已激活和可用事件。

https://angular.io/api/service-worker/SwUpdate