[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中做其他事情吗？

来自event.current，event.available值的来源？

编辑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提供了一种检查是否有新版本的方法。

从official docs：

@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可观察对象将发出，您可以创建想要让用户使用的任何类型的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替换此确认。