0

我有一个 PWA 应用程序正在运行，并且想要整理 application.component。所以我创建了这个独立的服务来监视 PWA 更新并通知用户：

import { Injectable } from '@angular/core';

import { MatSnackBar } from "@angular/material/snack-bar";

import { SwUpdate } from "@angular/service-worker";
import { environment } from '../environments/environment';

import { interval } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PwaUpdatesService {

  constructor(
    private _snackBar: MatSnackBar,
    private _swUpdate: SwUpdate,
  ) {

    if (environment.production) {
      this.setupUpdates();
    }
  }

  setupUpdates() {
    this._swUpdate.available.subscribe(u => {
      this._swUpdate.activateUpdate().then(e => {
        this._snackBar.open("There is an update", "reload app", { duration: 99999 }).onAction().subscribe(
          () => location.reload()
        );
      });
    });

    const everySixHours$ = interval(6 * 60 * 60 * 1000);
    everySixHours$.subscribe(() => this._swUpdate.checkForUpdate());
  }

}

我的问题是，我在哪里“调用”此服务，以便在应用启动时创建并运行它？我试图将它放入 app.module 提供者的部分，但它不会被创建。

我可以在 app.component 中再次导入服务，但我想整理一下。那么我在哪里放置一个自动运行的服务呢？

[更新] 我试图在我的 app.component 中导入它，但通知不会触发。调用它们后似乎服务会被破坏吗？

constructor(
  private pwaUpdatesService: PwaUpdatesService,
) {
    pwaUpdatesService.setupUpdates();
}
4

1 回答 1

0

您可以在 内部调用它app.component.ts，在大多数情况下它是根组件

constructor(private readonly _pwaService: PwaUpdatesService){
  this._pwaService.setupUpdates();
}
于 2020-09-25T09:46:25.767 回答