Question

我在使用Service Workers的angular 6应用程序时遇到问题。

它不会自动更新，随着我每周制作新版本，我的用户经常过时。

这是我的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

我不知道您是否已注册服务人员。有一个错误，也许它没有自动注册。在您的角度应用程序的main.ts中尝试以下操作：

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

角度PWA不更新

1 个答案: