Complete web push example with non-interactive subscription

[maxrothman]

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:

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:

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.

[patrickkettner]

Hi Max! Out of curiosity, why is it not a “real solution“? Statistically a majority of usage of push notifications subscriptions within an extensions happen as the result of user interaction. Not questioning your use case, but I would love to better understand it so we can properly document it

[maxrothman]

Interesting, whats's an example of push notification subscriptions resulting from a user interaction? I'm not sure I understand how that would work.

My use case is that I'm using silent push notifications to sync data to the extension. The user performs an interaction on some other device, then when they open the extension popup that information should be instantly available in the popup view. Of course I could queue those updates on my backend and poll for them/use websockets when the popup is opened, but it significantly simplifies my backend if I don't have to handle that data queueing.