Push messages | Frontend Practical Guide

Widely available Supported across all major browsers. Safe to use in production.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`PushEvent`	42	17	44	16	42	16.4
`permission_push` `push` permission	43	79	46	17	43	17
`data` The data read-only property of the PushEvent interface returns a reference to a PushMessageData object containing data sent to the PushSubscription.	50	17	44	16	50	16.4
`PushEvent` The PushEvent() constructor creates a new PushEvent object. Note that this constructor is exposed only to a service worker context.	42	17	44	16	42	16.4
`PushManager` The PushManager interface of the Push API provides a way to receive notifications from third-party servers as well as request URLs for push notifications.	42	17	44	16	42	16.4
`getSubscription` The PushManager.getSubscription() method of the PushManager interface retrieves an existing push subscription.	42	17	44	16	42	16.4
`permissionState` The permissionState() method of the PushManager interface returns a Promise that resolves to a string indicating the permission state of the push manager. Possible values are 'prompt', 'denied', or 'granted'.	44	17	44	16	44	16.4
`subscribe` The subscribe() method of the PushManager interface subscribes to a push service.	42	17	44	16	42	16.4
`supportedContentEncodings_static` The supportedContentEncodings read-only static property of the PushManager interface returns an array of supported content codings that can be used to encrypt the payload of a push message.	60	17	134	16	60	16.4
`PushMessageData` The PushMessageData interface of the Push API provides methods which let you retrieve the push data sent by a server in various formats.	50	17	44	16	50	16.4
`arrayBuffer` The arrayBuffer() method of the PushMessageData interface extracts push message data as an ArrayBuffer object.	50	17	44	16	50	16.4
`blob` The blob() method of the PushMessageData interface extracts push message data as a Blob object.	50	17	44	16	50	16.4
`bytes` The bytes() method of the PushMessageData interface extracts push message data as a Uint8Array object.	132	132	128	18	132	18
`json` The json() method of the PushMessageData interface extracts push message data by parsing it as a JSON string and returning the result.	50	17	44	16	50	16.4
`text` The text() method of the PushMessageData interface extracts push message data as a plain text string.	50	17	44	16	50	16.4
`PushSubscription` 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.	42	17	44	16	42	16.4
`endpoint` The endpoint read-only property of the PushSubscription interface returns a string containing the endpoint associated with the push subscription.	42	17	44	16	42	16.4
`expirationTime` The expirationTime read-only property of the PushSubscription interface returns a DOMHighResTimeStamp of the subscription expiration time associated with the push subscription, if there is one, or null otherwise.	60	17	96	16	60	16.4
`getKey` The getKey() method of the PushSubscription interface returns an ArrayBuffer representing a client public key, which can then be sent to a server and used in encrypting push message data.	42	17	44	16	42	16.4
`options` The options read-only property of the PushSubscription interface is an object containing the options used to create the subscription.	54	17	44	16	54	16.4
`toJSON` The toJSON() method of the PushSubscription interface is a standard serializer: it returns a JSON representation of the subscription properties, providing a useful shortcut.	42	17	44	16	50	16.4
`unsubscribe` The unsubscribe() method of the PushSubscription interface returns a Promise that resolves to a boolean value when the current subscription is successfully unsubscribed.	42	17	44	16	50	16.4
`PushSubscriptionChangeEvent`	138	17	137	16	138	16.4
`newSubscription`	138	17	137	16	138	16.4
`oldSubscription`	138	17	137	16	138	16.4
`PushSubscriptionChangeEvent` `PushSubscriptionChangeEvent()` constructor	138	17	137	16.1	138	16.4
`PushSubscriptionOptions` The PushSubscriptionOptions interface of the Push API represents the options associated with a push subscription.	54	17	44	16	54	16.4
`applicationServerKey` The applicationServerKey read-only property of the PushSubscriptionOptions interface contains the public key used by the push server.	54	17	44	16	54	16.4
`userVisibleOnly` The userVisibleOnly read-only property of the PushSubscriptionOptions interface indicates if the returned push subscription will only be used for messages whose effect is made visible to the user.	54	17		16	54	16.4
`push_event` The push event is sent to a service worker's global scope (represented by the ServiceWorkerGlobalScope interface) when the service worker has received a push message.	40	17	44	16	40	16.4
`pushsubscriptionchange_event` The pushsubscriptionchange event is sent to the global scope of a ServiceWorker to indicate a change in push subscription that was triggered outside the application's control.	138	17	44	16	138
`ServiceWorkerRegistration` The ServiceWorkerRegistration interface of the Service Worker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin.	40	17	44	11.1	40	11.3
`pushManager` The pushManager read-only property of the ServiceWorkerRegistration interface returns a reference to the PushManager interface for managing push subscriptions; this includes support for subscribing, getting an active subscription, and accessing push permission status.	40	17	44	16	40	16.4

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new self.Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});

Use cases

Using Push messages

The PushEvent interface of the Push API represents a push message that has been received.

Cautions

May not be supported in older browsers.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.