Question

我有一个角度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();
    }
  }

Answer 1

好吧，我想了解问题出在手机中，因为该应用已稳定，所以该服务通过计时器开始轮询，因此由于某种原因它没有正确检查更新

 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保持不变。希望对别人有帮助

Android主屏幕应用程序和浏览器上的Angular PWA Force Realod

1 个答案: