Angular Service Worker SwUpdate.available未触发

问题描述

我很难将Angles Service Worker集成到我的应用程序中.我遵循了指南，到目前为止，它仍然有效.我可以在主屏幕上创建快捷方式，然后将其启动到我的应用中.问题是我的应用程序无法以某种方式更新.如果我更改按钮的名称，请构建应用程序并将其放置到服务器上，直到我按F5键为止，应用程序仍会显示旧版本(重新启动应用程序也无济于事).

I'm having a hard time integrating angulars service worker into my application. I followed the guide and it works so far. I can create a shortcut on my homescreen and launch into my app. The problem is that my app somehow doesn't update. If I change the name of a button, build the app and put it onto my server the app still shows the old version until I hit F5 (restarting the app doesn't help either).

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

I tried to put the following code into my ngOnInot of my app but it didn't help

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缓存了什么，还是为什么我的应用程序没有意识到有新版本?

The app is running on my apache2 linux machine. Is my apache caching something or why doesn't my app realize that there is a new version?

在此先感谢您的帮助:)

Thanks in advance for your help :)

我的ngsw-config.json

My 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/**"
      ]
    }
  }]
}

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

It works if I run the app local using "http-server" but when I copy the files over to my apache it doesn't detect the update. In the networking tab I can see that the interval works, the app gets a new "ngsw.json" from the server every 3 seconds. If I update my app I can see that there are new hash values inside of the response for "ngsw.json". After that the browser loads the new "index.html" and "main.***.js" from my server but the app doesn't apply the new version. According to my code it should say "update found" but nothing happens.

推荐答案

您可能需要告诉服务人员检查服务器的更新，我通常为此使用服务:

You will probably need to tell the service worker to check the server for updates, I usually use a service for this:

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:

---

For whatever reason, sometimes Angular does not regsiter the service worker properly. So you can modify 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));

这篇关于Angular Service Worker SwUpdate.available未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！