代码之家 › 专栏 › 技术社区 › user2828442

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

progressive-web-apps ionic4 ionic-framework angular

0

user2828442 · 技术社区 · 5 年前

我在我的 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 , 事件可用 价值观来了吗?

编辑1

即使我上传了一个新版本,我在控制台中也看不到这些消息

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

这是什么原因?

0 回复 | 直到 5 年前

1

Pardeep Jain 5 年前

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

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

点击时如何更新

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

let appUpdate = updates.activateUpdate();

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

2

0

Eliran Eliassy 5 年前

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

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