JavaScript PushEvent data Property

Beginner
5 min read
Updated: Nov 2026
5 examples
Property
Decorative image with the word DATA

Definition

PushEvent.data is a read-only property that returns a PushMessageData object for the push payload, or null if none was sent (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.data. Start with this line.

JavaScript
event.data
CallWhat it does
event.dataPrimary signature.

Built into the service worker. Read event.data on a PushEvent — no import required.

Library declarations
JavaScript
event.data

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*The current value of event.data.

JavaScript Examples

Example 1 — MDN JSON Handler

Parse event.data as JSON and prepare notification text (MDN pattern).

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.";

  // new Notification(title, { body: message, tag: "simple-push-demo-notification" });
});
Try It Yourself

How It Works

  1. Check permission. Skip if notifications are not granted.
  2. Parse safely. event.data?.json() ?? {} handles missing payloads.
  3. Apply defaults. Empty objects still get a title and message.
  4. Show UI. Use those strings in a notification (commented here for clarity).

Example 2 — Read Plain Text

When the server sends a UTF-8 string instead of JSON.

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

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

How It Works

  1. Null check. Exit early when there is no payload.
  2. Call text(). Returns the payload as a string.
  3. Use the string. Log it, or pass it to a notification body.

Example 3 — Silent Push (null)

MDN: data is null when no data member was passed.

JavaScript
self.addEventListener("push", (event) => {
  if (event.data === null) {
    console.log("Silent push - wake worker only");
    // sync cache / fetch updates ...
    return;
  }

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

How It Works

  1. Compare to null. Silent pushes are intentional.
  2. Do background work. Refresh data without showing a notification.
  3. Otherwise read. Only call text() / json() when data exists.

Example 4 — Route by action

Servers often send JSON with a discriminator field (MDN PushMessageData sample).

JavaScript
self.addEventListener("push", (event) => {
  if (!event.data) return;

  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);
  }
});
Try It Yourself

How It Works

  1. Require data. Skip silent pushes.
  2. Parse once. json() returns a plain object.
  3. Branch on action. Different actions can notify or forward to clients.

Example 5 — Safe Optional Chaining

Combine ?. and ?? so missing payloads never throw.

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

  console.log(title, count);
});
Try It Yourself

How It Works

  1. Optional call. If data is null, ?.json() yields undefined.
  2. Object fallback. ?? {} gives a safe empty object.
  3. Field fallbacks. ?? fills title and count when missing.
Compatibility

Browser Support

PushEvent.data is marked Baseline Widely available on MDN (since March 2023). Requires a secure context and a service worker. Not available in Internet Explorer.

✓ Baseline · Widely available

PushEvent.data

Read push payloads in modern browsers via service workers.

96% Core tag support
Chrome Yes
Full support
Edge Yes
Full support
Firefox Yes
Full support
Safari 18+
Push API maturity varies by OS
Opera Yes
Full support
HTML element 100% supported

Bottom line: Guard for null, prefer event.data?.json() ?? {}, and test on HTTPS.

Frequently Asked Questions

A read-only PushMessageData object with the bytes sent to the PushSubscription, or null if the push had no data member (MDN).
No. MDN marks PushEvent.data as Baseline Widely available (since March 2023). It is not Deprecated, Experimental, or Non-standard.
Only in a service worker push handler (secure context). It is not available on the main window thread.
text(), json(), arrayBuffer(), blob(), and bytes(). Unlike Fetch body readers, MDN says these methods can be called more than once on the same object.
When no payload was included - often called a silent push, which can wake the worker without user-visible content.
Use optional chaining and a fallback: const data = event.data?.json() ?? {}; then read fields with defaults like data.title || "Default".

Next: supportedContentEncodings

See which push content encodings the browser supports.

supportedContentEncodings →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript PushEvent Constructor JavaScript PushManager supportedContentEncodings Property