Complete web push example with non-interactive subscription

Author: maxrothmanCreated Feb 7, 2025Updated Feb 7, 2025

Currently, the cookbook.push example only features manually subscribing to the pushmanager in the service worker's devtools. Obviously this is not a real solution for live extensions. Getting the subscription created requires this additional code:

javascript

addEventListener('activate', (e) => {
  e.waitUntil(subscribeUserVisibleOnlyFalse());
})

This should be noted somewhere in the documentation or the example, and currently there's no information about this in either source or any other source I could find. The extension docs imply that you can use a top-level await to block until the subscription is created:

javascript

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

But of course top-level await isn't allowed in BSWs.

Source: GoogleChrome/chrome-extensions-samples

View original on GitHub View discussion on GitHub