feat(kit): check service worker updates on startup

angular.json

@@ -262,6 +262,7 @@
               "../theme/src/**/*.spec.ts",
               "../review/src/**/*.spec.ts",
               "../live-update/src/**/*.spec.ts",
+              "../app-update/src/**/*.spec.ts",
               "../offline/src/**/*.spec.ts",
               "../auth-firebase/src/**/*.spec.ts",
               "../auth-firebase/social/src/**/*.spec.ts"

package.json

@@ -63,6 +63,7 @@
     "@angular/cli": "^21.0.0",
     "@angular/compiler-cli": "^21.0.0",
     "@angular/fire": "^21.0.0-rc.0",
+    "@angular/service-worker": "^21.2.17",
     "@capacitor-community/apple-sign-in": "github:rdlabo/apple-sign-in#cap8_build",
     "@capacitor-community/facebook-login": "^8.0.0",
     "@capacitor-community/in-app-review": "^8.0.0",

projects/kit/app-update/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/kit/app-update/src/lib/kit-app-update.provider.spec.ts

@@ -0,0 +1,52 @@
+import { ApplicationRef, provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { DOCUMENT } from '@angular/common';
+import { SwUpdate } from '@angular/service-worker';
+import { BehaviorSubject } from 'rxjs';
+import { describe, expect, it, vi } from 'vitest';
+import { KitAppUpdateService, provideKitAppUpdate } from './kit-app-update.provider';
+
+describe('provideKitAppUpdate', () => {
+  it('activates a complete update and reloads once after startup becomes stable', async () => {
+    const stable = new BehaviorSubject(false);
+    const checkForUpdate = vi.fn().mockResolvedValue(true);
+    const activateUpdate = vi.fn().mockResolvedValue(true);
+    const reload = vi.fn();
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideKitAppUpdate(),
+        { provide: ApplicationRef, useValue: { isStable: stable } },
+        { provide: SwUpdate, useValue: { isEnabled: true, checkForUpdate, activateUpdate } },
+        { provide: DOCUMENT, useValue: { location: { reload } } },
+      ],
+    });
+
+    TestBed.inject(KitAppUpdateService);
+    expect(checkForUpdate).not.toHaveBeenCalled();
+    stable.next(true);
+    await vi.waitFor(() => expect(reload).toHaveBeenCalledOnce());
+    expect(checkForUpdate).toHaveBeenCalledOnce();
+    expect(activateUpdate).toHaveBeenCalledOnce();
+  });
+
+  it('does not reload when the installed version is current', async () => {
+    const checkForUpdate = vi.fn().mockResolvedValue(false);
+    const activateUpdate = vi.fn();
+    const reload = vi.fn();
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideKitAppUpdate(),
+        { provide: ApplicationRef, useValue: { isStable: new BehaviorSubject(true) } },
+        { provide: SwUpdate, useValue: { isEnabled: true, checkForUpdate, activateUpdate } },
+        { provide: DOCUMENT, useValue: { location: { reload } } },
+      ],
+    });
+
+    TestBed.inject(KitAppUpdateService);
+    await vi.waitFor(() => expect(checkForUpdate).toHaveBeenCalledOnce());
+    expect(activateUpdate).not.toHaveBeenCalled();
+    expect(reload).not.toHaveBeenCalled();
+  });
+});

projects/kit/app-update/src/lib/kit-app-update.provider.ts

@@ -0,0 +1,53 @@
+import type { EnvironmentProviders } from '@angular/core';
+import {
+  ApplicationRef,
+  Injectable,
+  inject,
+  makeEnvironmentProviders,
+  provideEnvironmentInitializer,
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { SwUpdate } from '@angular/service-worker';
+import { filter, first } from 'rxjs';
+
+/** Checks for and activates a complete Angular service-worker update when the application starts. */
+@Injectable({ providedIn: 'root' })
+export class KitAppUpdateService {
+  readonly #applicationRef = inject(ApplicationRef);
+  readonly #document = inject(DOCUMENT);
+  readonly #updates = inject(SwUpdate);
+  #started = false;
+
+  /** Starts one non-blocking update check after Angular reports the application as stable. */
+  start(): void {
+    if (this.#started || !this.#updates.isEnabled) {
+      return;
+    }
+    this.#started = true;
+    this.#applicationRef.isStable
+      .pipe(
+        filter((stable) => stable),
+        first(),
+      )
+      .subscribe(() => void this.#activateUpdate());
+  }
+
+  async #activateUpdate(): Promise<void> {
+    try {
+      if (!(await this.#updates.checkForUpdate())) {
+        return;
+      }
+      await this.#updates.activateUpdate();
+      this.#document.location?.reload();
+    } catch (error) {
+      console.error('Angular service-worker update check failed', error);
+    }
+  }
+}
+
+/** Provides a startup check that activates and reloads into the latest complete web application version. */
+export function provideKitAppUpdate(): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    provideEnvironmentInitializer(() => inject(KitAppUpdateService).start()),
+  ]);
+}

projects/kit/app-update/src/public-api.ts

@@ -0,0 +1,2 @@
+/** Automatic startup updates for Angular service-worker web applications. */
+export * from './lib/kit-app-update.provider';

projects/kit/package.json

@@ -10,6 +10,7 @@
     "@angular/core": "^21.0.0",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
+    "@angular/service-worker": "^21.0.0",
     "@ionic/angular": "^8.0.0",
     "@ionic/storage-angular": "^4.0.0",
     "@capacitor/core": ">=6.0.0 <9.0.0",
@@ -30,6 +31,9 @@
     "rxjs": "^7.8.0"
   },
   "peerDependenciesMeta": {
+    "@angular/service-worker": {
+      "optional": true
+    },
     "firebase": {
       "optional": true
     },

projects/kit/tsconfig.spec.json

@@ -13,6 +13,7 @@
     "theme/src/**/*.spec.ts",
     "review/src/**/*.spec.ts",
     "live-update/src/**/*.spec.ts",
+    "app-update/src/**/*.spec.ts",
     "offline/src/**/*.spec.ts",
     "auth-firebase/src/**/*.spec.ts",
     "auth-firebase/social/src/**/*.spec.ts"