JavaScript PushEvent data Property

What You’ll Learn

The read-only data property on PushEvent returns a PushMessageData object with bytes from the push server—or null for silent pushes. Learn text(), json(), arrayBuffer(), MDN’s notification handler pattern, and safe optional chaining—with five examples and try-it labs.

Introduction

When a web push message arrives, the browser wakes your service worker and fires a push event. The handler receives a PushEvent. Its data property is how you read whatever the application server attached to that message.

MDN describes data as a reference to a PushMessageData object—or null if no data member was passed when the event was created. That payload might be plain text, JSON, or raw binary depending on what the server sent.

Understanding the data Property

A read-only instance property on PushEvent that exposes the push payload.

• Type — PushMessageData or null.
• Read-only — you cannot assign to event.data.
• Source — bytes sent from the app server to the PushSubscription.
• Decryption — browsers decrypt push messages before exposing them via PushMessageData methods.
• Methods — text(), json(), arrayBuffer(), blob(), bytes().
• Reusable — unlike Fetch body readers, MDN says these methods can be called multiple times.
• Baseline Widely available on MDN (since March 2023).

📝 Syntax

Read data inside a push event handler:

event.data

Return value

A PushMessageData object, or null if no data was included with the push.

Typical pattern (MDN)

self.addEventListener("push", (event) => {
  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.";
  // show notification using title + message ...
});

⚖️ data vs Related Ideas

Examples Gallery

Examples follow MDN PushEvent.data. Run in a service worker context. Use View Output or Try It Yourself.

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 notification = new Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
  });
});

title: Something Has Happened
message: Here's something you might want to check out.

self.addEventListener("push", (event) => {
  if (!event.data) {
    console.log("Silent push — no data");
    return;
  }

  const body = event.data.text();
  console.log("Push says:", body);
});

Push says: Hello from the server

self.addEventListener("push", (event) => {
  if (event.data === null) {
    console.log("Silent push — wake worker only");
    // sync data, refresh cache, etc.
    return;
  }

  console.log("Payload:", event.data.text());
});

Silent push — wake worker only

self.addEventListener("push", (event) => {
  const obj = event.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    console.log("Notify:", obj.action);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    console.log("Forward:", obj.action);
  }
});

Notify: subscribe

self.addEventListener("push", (event) => {
  const payload = event.data?.json() ?? {};
  const title = payload.title ?? "Default title";
  const count = payload.count ?? 0;

  console.log(title, count);
});

Default title 0

🚀 Common Use Cases

• Show notification title and body from server JSON.
• Wake the worker on silent push to sync data in the background.
• Route different push types with an action field.
• Read binary payloads with arrayBuffer() or bytes().
• Unit-test push handlers by creating events with new PushEvent(..., { data }).

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since March 2023).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Service worker only — read data in push handlers.
• Secure context — HTTPS or localhost for Push API features.
• Multi-read — PushMessageData methods can be invoked more than once (unlike Fetch bodies).
• Related learning: PushEvent(), navigator.serviceWorker, Worker(), JavaScript hub.

💡 Best Practices