Build a safe Angular service-worker update prompt

Implement an application-scoped update coordinator. When VERSION_READY arrives, show one prompt for that version. Reload only after the user accepts and no unsaved work remains; otherwise remember that an update is waiting. Report installation failures without exposing sensitive data. Do not call activateUpdate in the live tab.

version v2 ready, no dirty work, user accepts -> document reload
version v2 ready, editor dirty              -> update waits
editor becomes clean, user accepts          -> document reload
duplicate v2 event                          -> no second prompt

• Listen only when service-worker updates are enabled.
• Deduplicate by target version hash.
• Do not reload while unsaved work exists.
• Do not activate mixed versions in place.
• Keep reporting metadata limited to version and event type.

1. Filter version updates to ready and installation-failed events.
2. Store the pending version and suppress duplicate prompts.
3. Ask an unsaved-work registry before offering the final reload action.
4. Reload the document after explicit acceptance.
5. Test ready, duplicate, dirty, deferred, disabled, and failed-installation paths.

import {Injectable, inject, signal} from '@angular/core';
import {SwUpdate, VersionReadyEvent} from '@angular/service-worker';

@Injectable({providedIn: 'root'})
export class UpdateCoordinator {
  private readonly updates = inject(SwUpdate);
  private readonly dirty = inject(UnsavedWorkRegistry);
  private readonly reporter = inject(UpdateReporter);
  readonly pendingVersion = signal<string | null>(null);
  private promptedVersion: string | null = null;
  private started = false;

  start(): void {
    if (this.started || !this.updates.isEnabled) return;
    this.started = true;
    this.updates.versionUpdates.subscribe(event => {
      if (event.type === 'VERSION_READY') this.onReady(event);
      if (event.type === 'VERSION_INSTALLATION_FAILED') {
        this.reporter.failed(event.version.hash);
      }
    });
  }

  private onReady(event: VersionReadyEvent): void {
    const version = event.latestVersion.hash;
    this.pendingVersion.set(version);
    if (this.promptedVersion === version || this.dirty.hasUnsavedWork()) return;
    this.promptedVersion = version;
  }

  reloadAccepted(): void {
    if (!this.pendingVersion() || this.dirty.hasUnsavedWork()) return;
    document.location.reload();
  }
}

Each update event is handled in O(1) time and the coordinator retains only one pending and one prompted version identifier.

• The UI must call or observe the coordinator once at application startup rather than creating several subscriptions.
• A dirty editor becoming clean should make the existing pending update actionable without requiring another version event.
• An unrecoverable service-worker state needs a separate forced-reload recovery path.
• Tests should replace document reload behind a small adapter if the environment cannot spy on it safely.

• Emit the same ready version twice and verify only one prompt state transition.
• Mark work dirty before the event, then clean it and accept the pending reload.
• Disable SwUpdate and verify no subscription or prompt is created.
• Emit an installation failure and verify only the version hash and event type are reported.

• Calling activateUpdate can mix an old runtime with new lazy chunks.
• Automatic reload can destroy unsaved user work.
• Starting the coordinator more than once creates duplicate prompts and subscriptions.
• Aggressive polling can delay service-worker registration by keeping the app unstable.