angular
diff --git a/‎goldens/public-api/service-worker/index.api.md
Lines changed: 4 additions & 0 deletions b/‎goldens/public-api/service-worker/index.api.md
Lines changed: 4 additions & 0 deletions
diff --git a/‎packages/service-worker/src/push.ts
Lines changed: 23 additions & 0 deletions b/‎packages/service-worker/src/push.ts
Lines changed: 23 additions & 0 deletions
diff --git a/‎packages/service-worker/worker/src/driver.ts
Lines changed: 40 additions & 1 deletion b/‎packages/service-worker/worker/src/driver.ts
Lines changed: 40 additions & 1 deletion
@@ -52,6 +52,10 @@ export class SwPush {
             title: string;
         };
     }>;
+    readonly pushSubscriptionChanges: Observable<{
+        oldSubscription: PushSubscription | null;
+        newSubscription: PushSubscription | null;
+    }>;
     requestSubscription(options: {
         serverPublicKey: string;
     }): Promise<PushSubscription>;
 
@@ -136,6 +136,24 @@ export class SwPush {
     };
   }>;
 
+  /**
+   * Emits updates to the push subscription, including both the previous (`oldSubscription`)
+   * and current (`newSubscription`) values. Either subscription may be `null`, depending on
+   * the context:
+   *
+   * - `oldSubscription` is `null` if no previous subscription existed.
+   * - `newSubscription` is `null` if the subscription was invalidated and not replaced.
+   *
+   * This stream allows clients to react to automatic changes in push subscriptions,
+   * such as those triggered by browser expiration or key rotation.
+   *
+   * [Push API]: https://w3c.github.io/push-api
+   */
+  readonly pushSubscriptionChanges: Observable<{
+    oldSubscription: PushSubscription | null;
+    newSubscription: PushSubscription | null;
+  }>;
+
   /**
    * Emits the currently active
    * [PushSubscription](https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription)
@@ -159,6 +177,7 @@ export class SwPush {
       this.messages = NEVER;
       this.notificationClicks = NEVER;
       this.notificationCloses = NEVER;
+      this.pushSubscriptionChanges = NEVER;
       this.subscription = NEVER;
       return;
     }
@@ -173,6 +192,10 @@ export class SwPush {
       .eventsOfType('NOTIFICATION_CLOSE')
       .pipe(map((message: any) => message.data));
 
+    this.pushSubscriptionChanges = this.sw
+      .eventsOfType('PUSH_SUBSCRIPTION_CHANGE')
+      .pipe(map((message: any) => message.data));
+
     this.pushManager = this.sw.registration.pipe(map((registration) => registration.pushManager));
 
     const workerDrivenSubscriptions = this.pushManager.pipe(
 
@@ -62,6 +62,14 @@ interface LatestEntry {
   latest: string;
 }
 
+// This is a bug in TypeScript, where they removed `PushSubscriptionChangeEvent`
+// based on the incorrect assumption that browsers don't support it.
+interface PushSubscriptionChangeEvent extends ExtendableEvent {
+  // https://w3c.github.io/push-api/#pushsubscriptionchangeeventinit-interface
+  oldSubscription: PushSubscription | null;
+  newSubscription: PushSubscription | null;
+}
+
 export enum DriverReadyState {
   // The SW is operating in a normal mode, responding to all traffic.
   NORMAL,
@@ -181,12 +189,18 @@ export class Driver implements Debuggable, UpdateSource {
       }
     });
 
-    // Handle the fetch, message, and push, notificationclick and notificationclose events.
+    // Handle the fetch, message, and push, notificationclick,
+    // notificationclose and pushsubscriptionchange events.
     this.scope.addEventListener('fetch', (event) => this.onFetch(event!));
     this.scope.addEventListener('message', (event) => this.onMessage(event!));
     this.scope.addEventListener('push', (event) => this.onPush(event!));
     this.scope.addEventListener('notificationclick', (event) => this.onClick(event));
     this.scope.addEventListener('notificationclose', (event) => this.onClose(event));
+    this.scope.addEventListener('pushsubscriptionchange', (event) =>
+      // This is a bug in TypeScript, where they removed `PushSubscriptionChangeEvent`
+      // based on the incorrect assumption that browsers don't support it.
+      this.onPushSubscriptionChange(event as PushSubscriptionChangeEvent),
+    );
 
     // The debugger generates debug pages in response to debugging requests.
     this.debugger = new DebugHandler(this, this.adapter);
@@ -382,6 +396,11 @@ export class Driver implements Debuggable, UpdateSource {
     event.waitUntil(this.handleClose(event.notification, event.action));
   }
 
+  private onPushSubscriptionChange(event: PushSubscriptionChangeEvent): void {
+    // Handle the pushsubscriptionchange event and keep the SW alive until it's handled.
+    event.waitUntil(this.handlePushSubscriptionChange(event));
+  }
+
   private async ensureInitialized(event: ExtendableEvent): Promise<void> {
     // Since the SW may have just been started, it may or may not have been initialized already.
     // `this.initialized` will be `null` if initialization has not yet been attempted, or will be a
@@ -510,6 +529,26 @@ export class Driver implements Debuggable, UpdateSource {
     });
   }
 
+  /**
+   * Handles changes to the push subscription by capturing the old and new
+   * subscription details and broadcasting a `PUSH_SUBSCRIPTION_CHANGE` message.
+   *
+   * This method is triggered when the browser invalidates an existing push
+   * subscription and creates a new one, which can happen without user interaction.
+   * It ensures that clients listening for service worker events are informed
+   * of the subscription update.
+   *
+   * @param event - The `PushSubscriptionChangeEvent` containing the old and new subscriptions.
+   */
+  private async handlePushSubscriptionChange(event: PushSubscriptionChangeEvent): Promise<void> {
+    const {oldSubscription, newSubscription} = event;
+
+    await this.broadcast({
+      type: 'PUSH_SUBSCRIPTION_CHANGE',
+      data: {oldSubscription, newSubscription},
+    });
+  }
+
   private async getLastFocusedMatchingClient(
     scope: ServiceWorkerGlobalScope,
   ): Promise<WindowClient | null> {