Угловой PWA Force Realod на Android-приложение и браузер домашнего экрана - PullRequest
Новая
       28

Угловой PWA Force Realod на Android-приложение и браузер домашнего экрана

1 голос
/ 27 апреля 2019

У меня есть угловой pwa, который проверяет наличие новых версий и перезагружает новый код приложения.Он отлично работает в любом настольном браузере, но когда у меня есть ярлык на домашнем экране, созданный с помощью Chrome, на моем устройстве Android или в мобильном браузере, он не обновляет свой код при появлении новой версии.У меня Chrome 73.0.3683.9 на устройстве Android

Я добавил таймер с rxjs, который проверяет обновления каждые 3 минуты (только для отладки) и перезагружает их, если они есть.

Ядобавив здесь код, и, надеюсь, кто-нибудь сможет помочь мне понять, почему он не работает на мобильных устройствах.

ngsw-config.json 

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

updates.service.ts 

@Injectable()
export class UpdatesService implements OnDestroy {

    private _unsb$ = new Subject();

    constructor(private _swUpdate: SwUpdate) {

        if (this._swUpdate.isEnabled) {

            // every 3 minutes
            timer(0, 1000 * 60 * 3)
                .pipe(takeUntil(this._unsb$))
                .subscribe(() => {
                    this._swUpdate.checkForUpdate()
                        .then(() => console.log('Finish checking for updates...'))
                })
        } else console.log('No service worker allowed');
    }

    CheckForUpdates() {
        this._swUpdate.available
            .pipe(takeUntil(this._unsb$))
            .subscribe(event => {
                this._swUpdate.activateUpdate()
                    .then(() => window.location.reload())
            });
    }

    ngOnDestroy() {
        this._unsb$.next();
        this._unsb$.complete();
    }
}

app.components.ts 

export class AppComponent implements OnInit {

    constructor(private _updates: UpdatesService) { }

    ngOnInit(): void {
      this._updates.CheckForUpdates();
    }
  }

1 Ответ

0 голосов
/ 28 апреля 2019

Хорошо, поэтому мне удается понять, в чем проблема, в мобильном телефоне сервис начинает опрос через таймер, прежде чем приложение стабилизируется, поэтому по какой-то причине он не выполняет проверку обновлений правильно 

 this._swUpdate.checkForUpdate()
                    .then(() => console.log('Finish checking for updates...'))

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

updates.service.ts 

  @Injectable()
  export class UpdatesService implements OnDestroy {

   private _unsb$ = new Subject();

   constructor(private _swUpdate: SwUpdate, appRef: ApplicationRef) {
       console.log('%c Update service is running...', 'color: green; font-weight: bold;');

       if (this._swUpdate.isEnabled) {
           console.log('%c Service worker enabled', 'color: orange; font-weight: bold;');

        // Allow the app to stabilize first, before starting polling for updates.
           const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true));
           const everySixHours$ = timer(0, 1000 * 60 * 60 * 6);
           const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);

           everySixHoursOnceAppIsStable$
               .pipe(takeUntil(this._unsb$))
               .subscribe(() => {
                   console.log('%c Checks for updates...', 'color: blue; font-weight: bold;')
                   this._swUpdate.checkForUpdate()
                       .then(() => console.log('%c Finish checking for updates...', 'color: blue; font-weight: bold;'));
               });
       } else console.log('%c No service worker allow', 'color: red; font-weight: bold;');
   }

   SubscribeForUpdates(): void {
       this._swUpdate.available
           .pipe(takeUntil(this._unsb$))
           .subscribe(event => {
               console.log('current version is', event.current.hash);
               console.log('available version is', event.available.hash);
               this._swUpdate.activateUpdate()
                   .then(() => window.location.reload(true))
           });
   }

   ngOnDestroy(): void {
       this._unsb$.next();
       this._unsb$.complete();
   }
}

ngsw-config.json и app.component.ts остаются неизменными. Надеюсь, это кому-нибудь поможет

...