Merge pull request #61 from chrisjwalk/fix/sw-update-polling-59

fix: check for SW updates on NavigationEnd

Author: chrisjwalk

libs/shared/src/lib/state/sw-update.store.spec.ts

@@ -1,4 +1,6 @@
+import { ApplicationRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { NavigationEnd, Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { SwUpdate, VersionEvent } from '@angular/service-worker';
@@ -10,9 +12,11 @@ describe('SwUpdateStore', () => {
   let store: SwUpdateStore;
   let snackBar: MatSnackBar;
   let versionUpdatesSubject: Subject<VersionEvent>;
+  let routerEventsSubject: Subject<NavigationEnd>;
 
   function setup(isEnabled: boolean) {
     versionUpdatesSubject = new Subject<VersionEvent>();
+    routerEventsSubject = new Subject<NavigationEnd>();
 
     TestBed.configureTestingModule({
       providers: [
@@ -24,8 +28,13 @@ describe('SwUpdateStore', () => {
             isEnabled,
             versionUpdates: versionUpdatesSubject.asObservable(),
             activateUpdate: vi.fn().mockResolvedValue(undefined),
+            checkForUpdate: vi.fn().mockResolvedValue(false),
           },
         },
+        {
+          provide: Router,
+          useValue: { events: routerEventsSubject.asObservable() },
+        },
       ],
     });
 
@@ -124,6 +133,51 @@ describe('SwUpdateStore', () => {
     expect(openSpy).not.toHaveBeenCalled();
   });
 
+  it('should call activateUpdate when snackbar action is clicked', async () => {
+    const activateUpdateSpy = vi.spyOn(
+      TestBed.inject(SwUpdate),
+      'activateUpdate',
+    );
+    const actionSubject = new Subject<void>();
+    vi.spyOn(snackBar, 'open').mockReturnValue({
+      onAction: () => actionSubject.asObservable(),
+      dismiss: vi.fn(),
+      afterDismissed: () => EMPTY,
+      afterOpened: () => EMPTY,
+      instance: {} as never,
+      containerInstance: {} as never,
+    });
+
+    versionUpdatesSubject.next({
+      type: 'VERSION_READY',
+      currentVersion: { hash: 'abc', appData: null },
+      latestVersion: { hash: 'def', appData: null },
+    } as VersionEvent);
+
+    actionSubject.next();
+    await TestBed.inject(ApplicationRef).whenStable();
+
+    expect(activateUpdateSpy).toHaveBeenCalled();
+  });
+
+  it('should call checkForUpdate on NavigationEnd', () => {
+    const checkSpy = vi.spyOn(TestBed.inject(SwUpdate), 'checkForUpdate');
+
+    routerEventsSubject.next(new NavigationEnd(1, '/', '/'));
+
+    expect(checkSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call checkForUpdate when SwUpdate is disabled', () => {
+    TestBed.resetTestingModule();
+    setup(false);
+    const checkSpy = vi.spyOn(TestBed.inject(SwUpdate), 'checkForUpdate');
+
+    routerEventsSubject.next(new NavigationEnd(1, '/', '/'));
+
+    expect(checkSpy).not.toHaveBeenCalled();
+  });
+
   it('should not subscribe to versionUpdates when SwUpdate is disabled', () => {
     TestBed.resetTestingModule();
     setup(false);

libs/shared/src/lib/state/sw-update.store.ts

@@ -1,4 +1,6 @@
 import { computed, inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { SwUpdate, VersionEvent } from '@angular/service-worker';
 import {
@@ -53,15 +55,18 @@ export function withSwUpdateFeature() {
         () => store.versionEvent?.type() === 'VERSION_READY',
       ),
     })),
-    withMethods(({ swUpdate }) => ({
+    withMethods(({ swUpdate }, doc = inject(DOCUMENT)) => ({
       reloadAppOnAction: rxMethod<void>(
         pipe(
           tap(async () => {
             await swUpdate.activateUpdate();
-            document.location.reload();
+            doc.location.reload();
           }),
         ),
       ),
+      checkForUpdate: rxMethod<unknown>(
+        pipe(tap(() => swUpdate.checkForUpdate())),
+      ),
     })),
     withMethods(({ snackBar, ...store }) => ({
       versionUpdates: rxMethod<VersionEvent>(
@@ -86,16 +91,20 @@ export function withSwUpdateFeature() {
  * Service Worker Update Store
  *
  * Subscribes to SwUpdate.versionUpdates and prompts for reload when
- * a new version is available. Subscription is started in onInit hook.
+ * a new version is available. Checks for updates on each NavigationEnd
+ * so the prompt only appears while the user is actively using the app.
  * This just needs to be provided/injected into the main app component
  * to function.
  */
 export const SwUpdateStore = signalStore(
   withSwUpdateFeature(),
-  withHooks((store, swUpdate = inject(SwUpdate)) => ({
+  withHooks((store, swUpdate = inject(SwUpdate), router = inject(Router)) => ({
     onInit() {
       if (swUpdate.isEnabled) {
         store.versionUpdates(swUpdate.versionUpdates);
+        store.checkForUpdate(
+          router.events.pipe(filter((e) => e instanceof NavigationEnd)),
+        );
       }
     },
   })),