W3cubDocs

/Web APIs

PushEvent: data property

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
data 50 17 44 No 37
16Supported on macOS 13 and later
No 50 48 37 16.4 5.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PushEvent/data