PushEvent: data property

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 only available in Service Workers.

The data read-only property of the PushEvent interface returns a reference to a PushMessageData object containing data sent to the PushSubscription.

Value

A PushMessageData object or null if no data member is passed when the event instance initialized.

Examples

The following example takes data from a PushEvent and displays it on all of the service workers' clients.

js
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 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",
    );
  });
});

Specifications

Specification
Push API
# dom-pushevent-data

Browser compatibility

BCD tables only load in the browser