Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Options of a PushSubscription

When a pushsubscriptionchange event occurs, it's an opportunity for a developer to re-subscribe the user for push. One of the pain points of this is that to re-subscribe a user, the developer has to keep the applicationServerKey (and any other subscribe() options) in sync between the web page's JavaScript and their service worker.

In Chrome 54 and later you can now access the options via the options parameter in a subscription object, known as PushSubscriptionOptions.

You can copy and paste the following code snippet into simple-push-demo to see what the options look like. The code simply gets the current subscription and prints out subscription.options.

    navigator.serviceWorker.ready.then(registration => {
      return registration.pushManager.getSubscription();
    })
    .then(subscription => {
      if (!subscription) {
        console.log('No subscription 😞');
        return;
      }

      console.log('Here are the options 🎉');
      console.log(subscription.options);
    });

With this small piece of information you can re-subscribe a user in the pushsubscriptionchange event like so:

    self.addEventListener('pushsubscriptionchange', e => {
      e.waitUntil(registration.pushManager.subscribe(e.oldSubscription.options)
        .then(subscription => {
          // TODO: Send new subscription to application server
        }));
    });

It's a small change, that will be super useful in the future.