Angular PWA 在 android 主屏幕应用程序和浏览器上强制重新加载

Angular PWA force realod on android home screen app and browser

我有一个 angular pwa 检查新版本并重新加载新的应用程序代码。 它在任何桌面浏览器上都能完美运行,但是当我在 android 设备或​​移动浏览器上使用 chrome 创建主屏幕快捷方式时,它不会在有新版本时更新其代码。 我在 android 设备

中有 Chrome 73.0.3683.9

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

好的,所以我设法理解了问题所在,在移动设备中 phone 服务在应用程序稳定之前通过计时器开始轮询,因此由于某种原因它没有正确检查更新

 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$ = interval(1000 * 60 * 60 * 6).pipe(startWith(0))
           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 保持不变。 希望对大家有帮助