feat(service-worker): handle 'notificationclick' events (#25860)

The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes #20956, #22311

PR Close #25860

packages/service-worker/worker/src/driver.ts

@@ -159,6 +159,7 @@ export class Driver implements Debuggable, UpdateSource {
     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 !));
 
     // The debugger generates debug pages in response to debugging requests.
     this.debugger = new DebugHandler(this, this.adapter);
@@ -275,6 +276,11 @@ export class Driver implements Debuggable, UpdateSource {
     msg.waitUntil(this.handlePush(msg.data.json()));
   }
 
+  private onClick(event: NotificationClickEvent): void {
+    // Handle the click event and keep the SW alive until it's handled.
+    event.waitUntil(this.handleClick(event.notification, event.action));
+  }
+
   private async handleMessage(msg: MsgAny&{action: string}, from: Client): Promise<void> {
     if (isMsgCheckForUpdates(msg)) {
       const action = (async() => { await this.checkForUpdate(); })();
@@ -299,6 +305,13 @@ export class Driver implements Debuggable, UpdateSource {
     await this.scope.registration.showNotification(desc['title'] !, options);
   }
 
+  private async handleClick(notification: Notification, action?: string): Promise<void> {
+    await this.broadcast({
+      type: 'NOTIFICATION_CLICK',
+      data: {action, notification},
+    });
+  }
+
   private async reportStatus(client: Client, promise: Promise<void>, nonce: number): Promise<void> {
     const response = {type: 'STATUS', nonce, status: true};
     try {

packages/service-worker/worker/src/service-worker.d.ts

@@ -83,6 +83,8 @@ interface PushEvent extends ExtendableEvent {
   data: PushMessageData;
 }
 
+interface NotificationClickEvent extends NotificationEvent, ExtendableEvent {}
+
 interface PushMessageData {
   arrayBuffer(): ArrayBuffer;
   blob(): Blob;
@@ -114,6 +116,7 @@ interface ServiceWorkerGlobalScope {
   addEventListener(event: 'fetch', fn: (event?: FetchEvent) => any): void;
   addEventListener(event: 'install', fn: (event?: ExtendableEvent) => any): void;
   addEventListener(event: 'push', fn: (event?: PushEvent) => any): void;
+  addEventListener(event: 'notificationclick', fn: (event?: NotificationClickEvent) => any): void;
   addEventListener(event: 'sync', fn: (event?: SyncEvent) => any): void;
 
   fetch(request: Request|string): Promise<Response>;