PWA auto refre sh / обновление на стороне клиента при обновлении приложения в Ioni c 5 - PullRequest
Новая
       72

PWA auto refre sh / обновление на стороне клиента при обновлении приложения в Ioni c 5

0 голосов
/ 16 июня 2020

Я добавил следующий код в свой 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 ?

Edit 1

Я не вижу этих сообщений в консоли, даже если я загружаю новую сборку 

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

В чем причина этого?

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Откуда приходят значения event.current, event.available?

Не уверен, но я считаю, что это зависит от управления версиями файлов, если на сервере доступен новый фрагмент -сайд или где размещено приложение, то оно запустит новую версию или новое обновление и будет зафиксировано в сценарии события, который вы написали.

Как вы обновляете при нажатии

Во-первых, вы должны быть уверены, что для загрузки доступна более новая версия, в таком случае вы можете сохранить экземпляр новой загрузки в переменной и вызвать действие по щелчку (как в примере, приведенном в официальной документации для ATHS - Добавить на главный экран) , как показано ниже - 

let appUpdate = updates.activateUpdate();

PS: не тестировал это, но должен опубликовать в качестве ответа, так как содержание слишком длинное для комментариев.

0 голосов
/ 16 июня 2020

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 обращение к вашему stati c файловому серверу (или 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, которое вам нравится.

...