Angular5 PWA 不刷新（服务工作者）

Question

我正在使用 angular5 开发一个应用程序，通过 ng-cli 使用服务工作者，但我意识到在第一次加载应用程序外壳后，它不会刷新。使用ng build?构建应用程序后，如何将新文件版本推送到我的应用程序。我可以直接手动重写 sw.js，但是因为它是通过 cli 生成的，所以我不喜欢影响任何我不知道是做什么的。

我整天都在寻找这个答案，但由于服务工作者是 1.6 版 ng-cli 的新成员，我没有找到任何答案。

我什至在 ng-cli 1.6 之前找到了一个与 angular 4 和非官方 Service Workers 实现类似的线程，但我不相信这种方法，因为它不是官方的，所以我想知道你们是否可以帮我找到一种控制外壳安装方式和寻找新版本的方法。

谢谢

Answer 1

这对我有用。这有助于浏览器检测应用程序的新版本。

App.component.ts：

    import { Component } from '@angular/core';
    import { SwUpdate } from '@angular/service-worker';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {    
      
      constructor(public updates:SwUpdate) {
        updates.available.subscribe(event => {
          console.log('current version is', event.current);
          console.log('available version is', event.available);
        });
        updates.activated.subscribe(event => {
          console.log('old version was', event.previous);
          console.log('new version is', event.current);
        });
    
        updates.available.subscribe(event => {
            updates.activateUpdate().then(() => this.updateApp());
        });
       }
      
       updateApp(){
        document.location.reload();
        console.log("The app is updating right now");
    
       }
}

和

ngsw.json：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "Your app",
      "installMode": "prefetch",
      "updateMode": "lazy",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "lazy",
      "resources": {
        "files": [
          "/assets/**"
        ],
        "urls":[
          "https://urlsyouwanttocachefrom.com/**",
        ]
      }
    }
  ]
}

这样，每次更新应用程序时，浏览器都会自动重新加载。