fix: subscribe push sample on activation

functional-samples/cookbook.push/README.md

@@ -4,7 +4,7 @@ This sample demonstrates using the [Push API](https://developer.mozilla.org/en-U
 
 ## Overview
 
-By calling a method in the sample and using an external push server website we can simulate an extension receiving a push message where it is not required to emit a notification by setting (`userVisibleOnly = false`) on registration.
+When the extension service worker activates, it subscribes to push with (`userVisibleOnly = false`). The sample logs the subscription so it can be pasted into an external push server website to simulate receiving a push message that does not require Chrome to display a notification.
 
 ## Running this extension
 
@@ -13,9 +13,9 @@ Note: This sample requires Chrome 132+. Before Chrome 132, the same code works w
 1. Clone this repository.
 1. Go to the [web push test server](https://web-push-codelab.glitch.me/) and copy the “Public Key” to the `APPLICATION_SERVER_PUBLIC_KEY` variable in background.js.
 1. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
-1. Click “service worker (Inactive)” on the extension to load DevTools for background.js
-1. In DevTools call: `await subscribeUserVisibleOnlyFalse();`
-1. Copy the output after “Subscription data to be sent to the push notification server:” and paste it into the [web push test server](https://web-push-codelab.glitch.me/) inside “Subscription to Send To” text box
+1. Chrome subscribes the extension during service worker activation. To see the subscription data, click “service worker (Inactive)” on the extension to load DevTools for background.js.
+1. If the subscription log was created before DevTools opened, call `await subscribeUserVisibleOnlyFalse();` to print the existing subscription again.
+1. Copy the JSON output after “Subscription data to be pasted in the test push notification server:” and paste it into the [web push test server](https://web-push-codelab.glitch.me/) inside “Subscription to Send To” text box
 1. Enter some text into “Text to Send”
 1. Click “SEND PUSH MESSAGE”
-1. Observe that there is no notification with the text you sent in the browser and no generic notification notification being shown by the browser (that is usually enforced). You’ll see the text you sent in the DevTools log proving the extension service worker received the push data.
+1. Observe that there is no notification with the text you sent in the browser and no generic notification being shown by the browser (that is usually enforced). You’ll see the text you sent in the DevTools log proving the extension service worker received the push data.

functional-samples/cookbook.push/background.js

@@ -16,27 +16,48 @@
 
 const APPLICATION_SERVER_PUBLIC_KEY = '<key>';
 
+self.addEventListener('activate', (event) => {
+  event.waitUntil(subscribeUserVisibleOnlyFalse());
+});
+
 async function subscribeUserVisibleOnlyFalse() {
-  const applicationServerKey = urlB64ToUint8Array(
-    APPLICATION_SERVER_PUBLIC_KEY
-  );
+  if (APPLICATION_SERVER_PUBLIC_KEY === '<key>') {
+    console.warn(
+      '[Service Worker] Replace APPLICATION_SERVER_PUBLIC_KEY before ' +
+        'subscribing to push.'
+    );
+    return;
+  }
+
   try {
-    let subscriptionData = await self.registration.pushManager.subscribe({
+    const existingSubscription =
+      await self.registration.pushManager.getSubscription();
+    if (existingSubscription) {
+      console.log('[Service Worker] Extension is already subscribed.');
+      logSubscriptionDataToConsole(existingSubscription);
+      return existingSubscription;
+    }
+
+    const applicationServerKey = urlB64ToUint8Array(
+      APPLICATION_SERVER_PUBLIC_KEY
+    );
+    const subscriptionData = await self.registration.pushManager.subscribe({
       // With our new change[1], this can be set to false. Before it must
       // always be set to true otherwise an error will be thrown about
       // permissions denied.
       userVisibleOnly: false,
-      applicationServerKey: applicationServerKey
+      applicationServerKey
     });
     console.log('[Service Worker] Extension is subscribed to push server.');
     logSubscriptionDataToConsole(subscriptionData);
+    return subscriptionData;
   } catch (error) {
     console.error('[Service Worker] Failed to subscribe, error: ', error);
   }
 }
 
 function logSubscriptionDataToConsole(subscription) {
-  // The `subscription` data would normally only be know by the push server,
+  // The `subscription` data would normally only be known by the push server,
   // but for this sample we'll print it out to the console so it can be pasted
   // into a testing push notification server (at
   // https://web-push-codelab.glitch.me/) to send push messages to this