Angular PWA 不更新

Question

我的 Angular 6 应用程序使用 Service Worker 时遇到问题。

它不会自动更新，而且我每周都会制作新版本，因此我的用户经常会过时。

这是我的 app.component.ts

import { Component } from '@angular/core';
import { DataService } from 'src/services/data.service';
import { SwUpdate } from '@angular/service-worker';
declare var M: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'MyApp';

  public modalUpdate:any;

  constructor(public dataService: DataService, public updates:SwUpdate) {
    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
      localStorage.setItem("version",event.current.appData["version"]);
      localStorage.setItem("versionHash",event.current.hash);
      updates.activateUpdate().then(() => this.modalUpdate.open());
    });
    updates.activated.subscribe(event => {
      localStorage.setItem("activatedVersion",event.previous.appData["version"]);
      localStorage.setItem("activatedVersionHash",event.previous.hash);
      console.log('old version was', event.previous);
      console.log('new version is', event.current);
    });
   }

   updateApp(){
    window.location.reload();
    console.log("se está actualizando");

   }

  ngOnInit() {
    this.modalUpdate = new M.Modal(document.querySelector('#modalUpdate'));
  }

}

但似乎永远不会触发 updateApp 方法。当我通过访问 /ngsw/status 看到 NGSW 调试信息时，我看到：

NGSW Debug Info:

Driver state: NORMAL ((nominal))
Latest manifest hash: none
Last update check: never



=== Idle Task Queue ===
Last update tick: never
Last update run: never
Task queue:


Debug log:

所以它说从未更新或检查过更新（正如我所读）

这是我的 ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "MyApp",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/*.html",
          "/*.css",
          "/*.js",
          "/assets/fonts/**"
        ]
      }
    },
    {
      "name": "games",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/games/fk/**"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ],
        "urls": [
          "https://f001.backblazeb2.com/file/**",
          "https://picsum.photos/**"
        ]
      }
    }
  ]
}

#modalUpdate 元素是一个带有触发 updateApp 功能的按钮的模态元素，它永远不会起作用（似乎永远不会触发 updates.available 和 updates.activated）。

当用户直接从 Chrome 打开页面并刷新它时，页面会更新，但我需要应用程序在不打开浏览器的情况下自行刷新，有时甚至从浏览器刷新，即使它已加载新版本，它又回到了以前的版本。

应该是每次加载应用都会自动更新，所以我不知道为什么缓存从不刷新。

我几乎绝望了。我应该怎么做，或者我做错了什么？

非常感谢。

Answer 1

我不知道你是否注册了 service worker。有一个错误，也许它没有自动注册。在你的 Angular 应用程序的 main.ts 中试试这个：

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