Angular - Service Worker 没有立即应用更新

如何解决Angular - Service Worker 没有立即应用更新

我们将 Angular 8 与 .NET Web API 一起使用。最近我们在 UI 方面进行了重大更改，这对最终用户产生了影响，因为 Service Worker 没有立即应用来自服务器的最新更改。只有在刷新浏览器或在下一个标签中重新打开浏览器后，才会在最终用户浏览器上应用最新更新。

但我们希望在更新可用后立即刷新浏览器。在开发者工具下，我们可以看到 Service Worker 正在拉取最新的更改，但并未立即应用。

下图来自我的浏览器 - Service Worker 显示浏览器中可用的更新

我们尝试创建我们自己的 ngsw-serviceworker.js 文件，但是在部署后脚本之后我们看不到我们自己的文件。 Angular 从 service worker 包中创建默认的 ngsw-serviceworker.js。

这是我们为强制刷新而编写的一段代码（如果有任何更新可用）。但是没有运气，即使是此代码也仅在浏览器重新打开时才适用。

我们使用的版本 - "@angular/service-worker": "8.2.14",角 8.

Angular.json

"serviceWorker": 真,"ngswConfigPath": "ngsw-config.json"

App.Component.ts：（下面是我们在构造函数中写的代码）

  if (this.swUpdate) {
   this.swUpdate.available.subscribe((event) => {
    console.log(`current`,event.current,`available `,event.available);
    this.swUpdate.activateUpdate().then(() =>
    {
      location.reload();
    
    }
    ); 
  });

有人可以帮助我们找到解决方案，从服务器在用户浏览器上应用 html/js/CSS 更改，或者在 Service Worker 更新可用后立即重新加载浏览器。

我们的 UI 代码部署在云 AWS 上。

解决方法

你需要告诉 service worker 检查服务器是否有更新，我通常为此使用一个服务：

export class UpdateService {

  constructor(public updates: SwUpdate) {
    if (updates.isEnabled) {
      interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate()
        .then(() => console.log('checking for updates')));
    }
  }

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

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

在你的 app-component.ts 中：

  constructor(private sw: UpdateService) {
    // check the service worker for updates
    this.sw.checkForUpdates();
  }

无论出于何种原因，Angular 有时无法正确注册 Service Worker。所以你可以修改 main.ts ：替换：

platformBrowserDynamic().bootstrapModule(AppModule);

与：

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('ngsw-worker.js');
  }
}).catch(err => console.log(err));