Angular PWA SwUpdate Snackbar

Question

我嘗試為我的Angular PWA 實現一個邏輯，其中當更新可用時觸發小吃欄，當小吃欄被關閉時，我希望有一個按鈕可供用戶手動更新應用程序。 （最后一件事目前沒有實現）

到目前為止，它成功了，但是checkForUpdate一次又一次地被觸發-> 我的控制台被垃圾郵件發送了。 我只是無法弄清楚為什么會發生這種情況以及我對SwUpdate行為的理解錯誤

我創建了一個問題可見的stackblitz 示例- 我收到一個錯誤，即我的瀏覽器不支持 stackblitz 中的服務工作者 - 任何想法如何解決這個問題？ （使用 chrome 和在 localhost 上運行的普通應用程序可以正常工作）

app.component.ts：

import { ApplicationRef, Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { SwUpdate } from '@angular/service-worker';
import { interval, concat } from 'rxjs';
import { first } from 'rxjs/operators';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'newApp';
  updateAvailable = false;

  constructor(private snackbar: MatSnackBar, private swUpdate: SwUpdate, private appRef: ApplicationRef) { }

  ngOnInit() {
    this.checkUpdate();
  }

  openSnackbar() {
    const snack = this.snackbar.open('Update Available', 'Install Now!', { duration: 10000 });

    snack
      .onAction()
      .subscribe(() => {
        window.location.reload();
      });
    if(snack.afterDismissed()){
      console.log('afterDismissed: ', snack.afterDismissed())
      // here the button should become available for a manual update by the user
    } else {
      console.log('else: ', snack)
    }
  }

  checkUpdate() {
    //the Jquery stuff is from Angular-website so I guess it should work right?
    const appIsStable$ = this.appRef.isStable.pipe(
      first(isStable => isStable === true)
    );
    const everySixHours$ = interval(60000);
    const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);

    everySixHoursOnceAppIsStable$.subscribe(() => {
      this.swUpdate.checkForUpdate().then(() => console.log('checked!'));
      if (this.swUpdate.available) {
        this.openSnackbar();
      } else {
        console.log('no update found!');
      }
      console.log('update checked!');
    });
  }
}

提前致謝！

Answer 1

原因在如果：

  if (this.swUpdate.available) {
    this.openSnackbar();
  } else {
    console.log('no update found!');
  }

this.swUpdate.available是一個始終存在的可觀察對象。 正確的用法是訂閱一次：

this.swUpdate.available.subscribe(() => this.openSnackbar());

Answer 2

我認為propper和最新的解決方案應該是這樣的：

const stableApp: Observable<boolean> = this.applicationRef.isStable.pipe(first(Boolean));
const everyHour: Observable<number> = timer(3 * 1000, 60 * 60 * 1000);

// Checks for an update on start and every hour and waits until the new version is downloaded from the server and ready for activation.
concat(stableApp, everyHour).subscribe(() => this.swUpdate.checkForUpdate());
    
// "versionUpdates" should be used instead of "available" observable
this.swUpdate.versionUpdates.pipe(
    filter(($event: VersionEvent) => $event.type === 'VERSION_READY')
).subscribe(() => {
    // Update ready
    this.openSnackbar();
});