PWA 在 Ionic 5 中的应用程序更新时自动刷新/更新客户端答案

【问题标题】：PWA auto refresh / update client side on app update in Ionic 5PWA 在 Ionic 5 中的应用程序更新时自动刷新/更新客户端
【发布时间】：2020-06-16 08:35:22
【问题描述】：

我在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);

这是什么原因？

【问题讨论】：

标签： angular ionic-framework ionic4 progressive-web-apps

【解决方案1】：

event.current、event.available 值从何而来？

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

点击更新的方式

首先，您需要确保有较新的版本可供下载，如果是这样，您可以在变量中保存新下载的实例并调用点击操作（如 ATHS 官方文档中提供的示例 - 添加到主页屏幕），如下所示 -

let appUpdate = updates.activateUpdate();

PS：尚未对此进行测试，但由于内容很长以供评论，因此必须发布作为答案。

【讨论】：

我已经更新了我的问题，请参阅Edit:: 1，即使在上传新版本后我也没有在控制台日志中看到消息
@user2828442 在服务器上推送代码后它不会立即显示控制台消息，这需要一些时间。多少，取决于哪些因素我不知道

【解决方案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 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());
      }
    });
  }

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

【讨论】：