7

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

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

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

谢谢

4

2 回答 2

8

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

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

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

于 2019-02-23T03:52:09.557 回答
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;
  }
}

于 2020-10-08T16:09:57.987 回答