PushSubscription

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Web Workers.

The PushSubscription interface of the Push API provides a subscription's URL endpoint along with the public key and secrets that should be used for encrypting push messages to this subscription. This information must be passed to the application server, using any desired application-specific method.

The interface also provides information about when the subscription will expire, and a method to unsubscribe from the subscription.

Instance properties

PushSubscription.endpoint Read only: A string containing the endpoint associated with the push subscription.
PushSubscription.expirationTime Read only: A DOMHighResTimeStamp of the subscription expiration time associated with the push subscription, if there is one, or null otherwise.
PushSubscription.options Read only: An object containing the options used to create the subscription.
PushSubscription.subscriptionId Deprecated Read only Non-standard: A string containing the subscription ID associated with the push subscription.

Instance methods

PushSubscription.getKey(): Returns an ArrayBuffer which contains the client's public key, which can then be sent to a server and used in encrypting push message data.
PushSubscription.toJSON(): Standard serializer — returns a JSON representation of the subscription properties.
PushSubscription.unsubscribe(): Starts the asynchronous process of unsubscribing from the push service, returning a Promise that resolves to a boolean value when the current subscription is successfully unregistered.

Description

Each browser uses a particular push service. A service worker can use PushManager.subscribe() to subscribe to the supported service, and use the returned PushSubscription to discover the endpoint where push messages should be sent.

The PushSubscription is also used to get the public key and secret that the application server must use to encrypt the messages that it sends to the push service. Note that the private keys used to decrypt push messages are not shared by the browser, and are used to decrypt messages before they are passed to the service worker. This ensures that push messages remain private as they pass through the push server infrastructure.

The service worker doesn't need to know anything about the endpoints or encryption, other than to pass the relevant information onto the application server. Any mechanism may be used to share the information with the application server.

Example

Sending coding information to the server

The p256dh public key and auth secret used for encrypting the message are provided to the service worker via its push subscription, using the PushSubscription.getKey() method, along with the target endpoint for sending push messages in PushSubscription.endpoint. The coding that should be used for encryption is provided by the PushManager.supportedContentEncodings static property.

This example shows how you might put the needed information from PushSubscription and supportedContentEncodings into a JSON object, serialize it using JSON.stringify(), and post the result to the application server.

// Get a PushSubscription object
const pushSubscription = await serviceWorkerRegistration.pushManager.subscribe();

// Create an object containing the information needed by the app server
const subscriptionObject = {
  endpoint: pushSubscription.endpoint,
  keys: {
    p256dh: pushSubscription.getKeys('p256dh'),
    auth: pushSubscription.getKeys('auth'),
  },
  encoding: PushManager.supportedContentEncodings,
  /* other app-specific data, such as user identity */
};

// Stringify the object an post to the app server
fetch(`https://example.com/push/`, {
  method: "post",
  body: JSON.stringify(pushSubscription);
});

Unsubscribing from a push manager

navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    subscription
      .unsubscribe()
      .then((successful) => {
        // You've successfully unsubscribed
      })
      .catch((e) => {
        // Unsubscribing failed
      });
  });
});

Specifications

Specification
Push API # pushsubscription-interface

Browser compatibility

BCD tables only load in the browser