Question

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

我整天都在寻找这个答案，但由于服务人员是ng-cli的1.6版本的新手，我还没有找到。

我甚至在ng-cli 1.6之前找到了一个类似线程的线程4和一个非正式的服务工作者实现，但我不相信这种方法，因为它不是官方的，所以我想知道你们是否可以帮我找到一种方法来控制它安装shell的方式并寻找新的版本。

谢谢

Answer 1

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

App.module.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/**",
        ]
      }
    }
  ]
}

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

Answer 2

基于judasane的回答，我设法使用内置的SwUpdate类在每次加载应用程序时手动检查更新（此时仅显示加载指示器），然后重新加载可以应用更新时使用它，因此请确保当有人打开应用程序时，它始终是最新版本。

export class AppComponent implements OnInit {
  updateChecked = false;
  updateAvailable = false;
  
  // In your template, use this value to show a loading indicator while we are
  // waiting for updates. (You can also use it to hide the rest of the UI if
  // you want to prevent the old version from being used.)
  get waitingForUpdates() {
    return !this.updateChecked || this.updateAvailable;
  }

  constructor(private updates: SwUpdate) {}

  async ngOnInit() {
    this.updates.available.subscribe(() => {
      // Keep the loading indicator active while we reload the page
      this.updateAvailable = true;
      window.location.reload();
    });
    if (this.updates.isEnabled) {
      // This promise will return when the update check is completed,
      // and if an update is available, it will also wait for the update
      // to be downloaded (at which point it calls our callback above and
      // we just need to reload the page to apply it).
      await this.updates.checkForUpdate();
    } else {
      console.log('Service worker updates are disabled.');
    }
    // The update check is done (or service workers are disabled), now
    // we can take the loading indicator down (unless we need to apply an
    // update, but in that case, we have already set this.updateAvailable
    // to true by this point, which keeps the loading indicator active).
    this.updateChecked = true;
  }
}

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

2 个答案: