PWA自动刷新更新客户端在Ionic 5中的应用更新。

Question

我在我的 app.component.ts

constructor(private updates: SwUpdate,){

  {
    console.warn('check');
    this.updates.available.subscribe(event => {
        console.log('current version is', event.current);
        console.log('available version is', event.available);
        updates.activateUpdate().then(() => {
            console.warn('downloaded');
            document.location.reload();
        });
    });
    this.updates.activated.subscribe(event => {
        console.log('old version was', event.previous);
        console.log('new version is', event.current);
    });
}

我想在有新版本上传时通知用户，点击后加载新版本。

我是否需要写一个服务，将版本号存储在服务器和本地存储中，并不断检查新版本？

我还需要做什么吗？app.component.ts ?

从哪里来？事件.当前, 事件.可用 价值观来了 ?

编辑1

即使我上传了一个新的版本，我也没有在控制台看到这些信息。

console.log('current version is', event.current);
console.log('available version is', event.available);

这是什么原因呢？

Answer 1

event.current, event.available的值从哪里来？

我不确定，但我相信这取决于文件的版本，如果一个新的块在服务器端或应用程序托管的地方可用，那么它将触发新的版本或新的更新，并在你写的事件脚本中捕获。

你如何在点击时更新

首先你需要确定有更新的版本可以下载，如果有，那么你可以将新下载的实例保存在变量中，然后调用点击操作（就像ATHS官方文档中提供的例子--添加到主屏幕），就像下面--。

let appUpdate = updates.activateUpdate();

PS：还没有测试过，但由于内容较长，不便评论，只好发帖作为回答。

Answer 2

Angular提供了一个检查是否有新版本的方法。

从 正式文件:

@Injectable()
export class CheckForUpdateService {

  constructor(appRef: ApplicationRef, updates: SwUpdate) {
    // Allow the app to stabilize first, before starting polling for updates with `interval()`.
    const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true));
    const everySixHours$ = interval(6 * 60 * 60 * 1000);
    const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);

    everySixHoursOnceAppIsStable$.subscribe(() => updates.checkForUpdate());
  }
}

下面发生的事情是Angular联系你的静态文件服务器（或CDN），试图获取一个新的 ngsw 文件。

一旦有了，你的 available observable会发出，会你可以创建任何类型的UX，你想让你的用户。

 constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      if (confirm('New version is available, do you want to reload to update?')) {
        updates.activateUpdate().then(() => document.location.reload());
      }
    });
  }

你可以用其他任何你喜欢的UX来代替这个确认。