Angular Service Worker SwUpdate.available未触发

Question

我很难将angulars服务工作者整合到我的应用程序中.我按照指南进行操作至今.我可以在主屏幕上创建一个快捷方式并启动到我的应用程序中.问题是我的应用程序不知何故不更新.如果我改变一个按钮的名称,构建应用程序,并把它放到我的服务器应用程序仍显示旧版本,直到我打了F5(重新启动应用程序并没有帮助).

我试着将以下代码放入我的应用程序的ngOnInot中,但它没有帮助

ngOnInit() {
if (this._SwUpdate.isEnabled) {

  setInterval( () => {
    this._SwUpdate.checkForUpdate().then(() => console.log('checking for updates'));
  }, this.updateInterval);

  this._SwUpdate.available.subscribe(() => {

    console.log('update found');

    this._SwUpdate.activateUpdate().then(() => {
      console.log('updated');
      window.location.reload();
    });

  });

}

}

该应用程序正在我的apache2 linux机器上运行.我的apache缓存了什么,或者为什么我的应用程序没有意识到有新版本？

在此先感谢您的帮助 :)

编辑:

我的ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "roomPlan",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

编辑2:

如果我使用"http-server"在本地运行应用程序,但是当我将文件复制到我的apache时,它不会检测到更新.在网络选项卡中,我可以看到间隔工作,应用程序每隔3秒从服务器获取一个新的"ngsw.json".如果我更新我的应用程序,我可以看到"ngsw.json"的响应中有新的哈希值.之后,浏览器从我的服务器加载新的"index.html"和"main.***.js",但应用程序不应用新版本.根据我的代码,它应该说"发现更新",但没有任何反应.

Answer 1

您可能需要告诉服务工作者检查服务器是否有更新,我通常使用服务:

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不会正确地注册服务工作者.所以你可以修改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));

Answer 2

我在角度文档中找到了以下信息： https://angular.io/guide/service-worker-devops#debugging-the-angular-service-worker

摘要：角度站点上有一个有用的端点，可以显示服务工作人员状态：

http://site-url/ngsw/state

附加/ngsw/state到您的网站地址。如果服务有问题，它应该显示在那里。

Answer 3

在堆栈上的所有其他解决方案都不起作用之后，我开始调试 angular 的 ngsw-worker.js 脚本。我已经跟踪了更新逻辑并最终使用了“PrefetchAssetGroup”方法。每次调用方法时我都插入了日志记录，然后我意识到它一直在尝试缓存我的 favicon.ico。我已经在我的 ngsw.json 中检查了 favicon.ico 的位置，并意识到 favicon 不在那里。一旦我把图标放在那个位置，一切就开始正常工作了。