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

Question

我有一个 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/**"
        ]
      }
    }
  ]
}

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

应用程序组件.ts

export class AppComponent implements OnInit {

    constructor(private _updates: UpdatesService) { }

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

Answer 1

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

 this._swUpdate.checkForUpdate()
                    .then(() => console.log('Finish checking for 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 保持不变。 希望它对某人有帮助