JavaScript PushEvent Constructor

What You’ll Learn

The PushEvent() constructor creates a PushEvent in a service worker—the object behind the push and pushsubscriptionchange events in the Push API. Learn type, the optional data payload, PushMessageData, secure-context rules, and how it extends ExtendableEvent—with five examples and try-it labs.

Introduction

Web push lets an application server send messages to a subscribed browser even when your site is closed. When a push arrives, the browser wakes the service worker and fires a push event. The handler receives a PushEvent with optional payload bytes in event.data.

The PushEvent() constructor lets you create that event object yourself—mainly for tests, tooling, or learning how data is wrapped as PushMessageData. MDN notes it is exposed only in a service worker context.

Understanding the PushEvent() Constructor

Pass an event type string and an optional options object. The constructor returns a new PushEvent instance.

• type — "push" or "pushsubscriptionchange" (case-sensitive).
• data — optional payload; becomes event.data as PushMessageData.
• Inherits — ExtendableEvent options such as bubbles and cancelable.
• Secure context — Push API features require HTTPS (or localhost).
• Production use — real pushes are delivered by the browser; you listen with self.addEventListener("push", ...).

📝 Syntax

new PushEvent(type)
new PushEvent(type, options)

Parameters

• type — A string with the name of the event.
• options (optional) — In addition to ExtendableEvent fields, may include data.

Option fields (MDN)

Return value

A new PushEvent object.

⚖️ PushEvent vs Related APIs

Examples Gallery

Examples follow MDN PushEvent(). Run them in a service worker. Use View Output or Try It Yourself.

const dataInit = {
  data: "Some sample text",
};

const myPushEvent = new PushEvent("push", dataInit);

myPushEvent.data.text(); // "Some sample text"

Some sample text

const evt = new PushEvent("push");

console.log(evt.type);              // "push"
console.log(evt instanceof PushEvent); // true
console.log(evt.data);              // null (no data option)

push
true
null

const evt = new PushEvent("pushsubscriptionchange");

console.log(evt.type); // "pushsubscriptionchange"

pushsubscriptionchange

const payload = JSON.stringify({
  title: "New message",
  body: "You have mail",
});

const evt = new PushEvent("push", { data: payload });
const data = evt.data.json();

console.log(data.title); // "New message"
console.log(data.body);  // "You have mail"

New message
You have mail

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

  event.waitUntil(
    self.registration.showNotification(title, {
      body: message,
      tag: "simple-push-demo-notification",
    })
  );
});

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

🚀 Common Use Cases

• Unit tests that simulate push payloads in a service worker.
• Learning how PushMessageData wraps server bytes.
• Debugging subscription flows with pushsubscriptionchange.
• Building PWAs that show notifications from push data.
• Teaching the difference between constructing events vs receiving real pushes.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since March 2023).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Service worker only — not on the main thread.
• Secure context — HTTPS or localhost for Push API features.
• Extends ExtendableEvent — real handlers often call event.waitUntil(promise).
• Related learning: navigator.serviceWorker, Worker(), Event(), JavaScript hub.

💡 Best Practices