应用程序更新时PWA自动刷新/更新客户端-Ionic 5

event.current、event.available值从哪里来?

不确定,但我认为这取决于文件版本控制,如果服务器端或应用程序托管的地方有新块可用,它将触发新版本或新更新,并在您编写的事件脚本中捕获。

点击时如何更新

首先,您需要确保有新版本可供下载,如果有,则可以将新下载的实例保存在变量中并调用点击操作(如ATHS官方文档中提供的示例-添加到主屏幕),如下所示-

let appUpdate = updates.activateUpdate();

附言:尚未对此进行测试,但由于内容较长,需要发表评论,因此必须发布答案。

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 observable会发出信号,你可以创建任何你想让你的用户体验的用户体验吗:

 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());
      }
    });
  }

您可以将此确认替换为您喜欢的任何其他用户体验。