Angular PWA SwUpdate 总是触发更新和重新加载答案

【问题标题】：Angular PWA SwUpdate always trigger update and reloadAngular PWA SwUpdate 总是触发更新和重新加载
【发布时间】：2022-08-17 05:00:57
【问题描述】：

我有一个带角度的离子 PWA。每个软件包都是最新版本。

我有一个 SwupdaterService 并且在生产模式下，应用程序总是像循环一样重新加载，没有任何更新。

这是我的服务：

export class SwupdaterService {

  constructor(public updates: SwUpdate) {
    if (updates.isEnabled) {
      interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate()
        .then(() => console.log(\'checking for updates\')));
    }
  }

  public checkForUpdates(): void {
    this.updates.versionUpdates.subscribe(event => this.promptUser());
  }

  private promptUser(): void {
    console.log(\'updating to new version\');

    this.updates.activateUpdate().then((res) => { 
      alert(\'here!\');
      document.location.reload()
    });
  }
}

在 app.module 我有这个：

ServiceWorkerModule.register(\'ngsw-worker.js\', {
        enabled: environment.production,
        // Register the ServiceWorker as soon as the application is stable
        // or after 30 seconds (whichever comes first).
        registrationStrategy: \'registerWhenStable:30000\'
      }),

最后是我的 app.component：

export class AppComponent {
  constructor(
    private platform: Platform,
    private sw: SwupdaterService,
    private localizationService: LocalizationService) { }

  async ngOnInit() {
    await this.initializeApp();
  }

  async initializeApp() {
    await this.platform.ready();
    this.sw.checkForUpdates();
    await this.localizationService.setInitialAppLanguage();
  }
}

有人知道为什么会这样吗？

标签： angular ionic-framework

【解决方案1】：

我解决了这个问题，将 checkForUpdates 函数替换为这个：

  public checkForUpdates(): void {
    this.updates.versionUpdates.
      pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'),
        map(evt => ({
          type: 'UPDATE_AVAILABLE',
          current: evt.currentVersion,
          available: evt.latestVersion,
        }))).subscribe(evt => {
          this.promptUser();
        });
  }

就像我在 service.worker 中看到的那样：

  readonly versionUpdates: Observable<VersionEvent>;
    /**
     * Emits an `UpdateAvailableEvent` event whenever a new app version is available.
     *
     * @deprecated Use {@link versionUpdates} instead.
     *
     * The of behavior `available` can be rebuild by filtering for the `VersionReadyEvent`:
     * ```
     * import {filter, map} from 'rxjs/operators';
     * // ...
     * const updatesAvailable = swUpdate.versionUpdates.pipe(
     *   filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'),
     *   map(evt => ({
     *     type: 'UPDATE_AVAILABLE',
     *     current: evt.currentVersion,
     *     available: evt.latestVersion,
     *   })));
     * ```
     */

【讨论】：