Angular PWA Update Service prompts multiple times

Question

I have the following service injected, assisting in prompting the user to update once my PWA Angular application has been deployed on an environment.

However, it looks as if it prompts the users multiple times to update, leading them to do the following multiple times:

click update
The application refreshes
a new update modal appears

What might be causing this?

I've noticed this occurring after a single deployment, so there shouldn't be multiple updates necessary. I've followed the brief Angular service worker guide to get my basic code, and just enhanced it from there.

EDIT 1:

It's worth noting that my environment variable updateCheckTimeout is 30*60 (30 mins) by default.

@Injectable()
export class PwaService {
  updateCheckInterval = environment.serviceWorker.updateCheckTimeout;

  modalRef: NgbModalRef;
  constructor(private swUpdate: SwUpdate, private modalService: NgbModal) {
    if (swUpdate.isEnabled) {
      interval(this.updateCheckInterval).subscribe(() =>
        swUpdate.checkForUpdate(),
      );

      this.logUpdates();
    }
  }

  public logUpdates() {
    this.swUpdate.versionUpdates.subscribe((evt) => {
      switch (evt.type) {
        case 'VERSION_DETECTED':
          console.log(`Downloading new app version: ${evt.version.hash}`);
          break;
        case 'VERSION_READY':
          console.log(`Current app version: ${evt.currentVersion.hash}`);
          console.log(
            `New app version ready for use: ${evt.latestVersion.hash}`,
          );
          break;
        case 'VERSION_INSTALLATION_FAILED':
          console.log(
            `Failed to install app version '${evt.version.hash}': ${evt.error}`,
          );
          break;
      }
    });
  }

  public registerUpdateHandlers() {
    this.registerPromptOnUpdate();
    this.registerPromptOnUnrecoverableState();
  }

  private registerPromptOnUpdate() {
    this.swUpdate.versionUpdates.subscribe(async (event) => {
      await this.askUserToUpdate();
    });
  }

  private registerPromptOnUnrecoverableState() {
    this.swUpdate.unrecoverable.subscribe(async (event) =>
      this.askUserToUpdate(),
    );
  }

  private async askUserToUpdate() {
    const shouldDisplayModal = !this.modalRef;
    if (shouldDisplayModal) {
      const modalOptions: NgbModalOptions = {
        backdrop: 'static',
        keyboard: false,
        size: 'sm',
      };

      this.modalRef = this.modalService.open(
        UpdateModalComponent,
        modalOptions,
      );
      
      const userUpdatePromptResult = await this.modalRef.result;
      if (userUpdatePromptResult === UpdateModalResult.Refresh) {
        this.swUpdate.activateUpdate().then(() => window.location.reload());
      }
    }
  }
}

Angular PWA Update Service prompts multiple times

0 Answers0