JavaScript PushEvent() Constructor

Beginner
5 min read
Updated: Nov 2026
4 examples
Constructor
Decorative image with the word PUSHEVENT

Definition

new PushEvent(type, options) creates a PushEvent — the object behind push and pushsubscriptionchange in the Push API. Per MDN, the constructor is exposed only to a service worker context.

Pass the required arguments shown below. Use only in a service worker (secure context). Prefer listening for push over constructing events in production.

Syntax

Create a PushEvent. Start with this line.

JavaScript
new PushEvent(type, options?)
CallWhat it does
new PushEvent(type, options?)Primary signature.

Built into the service worker. Call new PushEvent(...) — no import required.

Library declarations
JavaScript
new PushEvent(type, options?)

Parameters

ParameterDescription
typeRequired. Event name — usually "push" or "pushsubscriptionchange"
options.dataOptional. Payload bytes wrapped as PushMessageData
options (Event fields)Optional. Also accepts ExtendableEvent / Event fields such as bubbles

Return Value

Return ValueDescription
*A new PushEvent object

JavaScript Examples

Example 1 — MDN Text data

Create a push event with a string payload and read it with text().

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

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

console.log(myPushEvent.data.text()); // "Some sample text"
Try It Yourself

How It Works

  1. Build options. dataInit holds the optional data field from MDN.
  2. Construct the event. new PushEvent("push", dataInit) creates a PushEvent.
  3. Wrap the payload. The constructor stores bytes on event.data as PushMessageData.
  4. Read as text. data.text() returns "Some sample text".

Example 2 — Basic push Without Data

Create a push event with only a type. Silent pushes often have no payload.

JavaScript
const evt = new PushEvent("push");

console.log(evt.type);                 // "push"
console.log(evt instanceof PushEvent); // true
console.log(evt.data);                 // null
Try It Yourself

How It Works

  1. Pass the type only. "push" is the usual name for an incoming push message.
  2. Check identity. instanceof PushEvent is true inside a service worker.
  3. No payload. Without options.data, event.data is null.
  4. Why it matters. Real silent pushes wake the worker without user-visible content — always null-check data.

Example 3 — JSON Payload with data.json()

Servers often send JSON strings; parse them in the worker.

JavaScript
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"
Try It Yourself

How It Works

  1. Stringify first. The data option expects payload bytes — a JSON string is a common choice.
  2. Construct with options. { data: payload } fills event.data.
  3. Parse once. PushMessageData.json() returns a plain object.
  4. Use the fields. Read title and body for notifications or UI updates.

Example 4 — pushsubscriptionchange Type

MDN lists this type for subscription lifecycle changes.

JavaScript
const evt = new PushEvent("pushsubscriptionchange");

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

// production pattern:
// self.addEventListener("pushsubscriptionchange", (event) => {
//   // refresh subscription with pushManager.subscribe()
// });
Try It Yourself

How It Works

  1. Use the lifecycle type. "pushsubscriptionchange" is case-sensitive (MDN).
  2. Inspect type. The constructor stores that string on the event.
  3. Listen in production. The browser fires this when a subscription is invalidated or replaced.
  4. Re-subscribe. Call pushManager.subscribe() and sync the new endpoint to your server.
Compatibility

Browser Support

The PushEvent() constructor is Baseline Widely available (MDN, since March 2023). It requires a secure context and is exposed only in service workers.

✓ Baseline · Widely available

PushEvent() constructor

Create PushEvent objects in service workers for the Push API.

Wide Modern browser support
Google Chrome Supported · Service worker
Full support
Mozilla Firefox Supported · Desktop & Android
Full support
Apple Safari Supported · modern Safari / iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Opera Follow Chromium
Full support
Internet Explorer No PushEvent / service workers
Not supported
PushEvent() Widely available

Bottom line: Supported in current Chrome, Firefox, Safari, and Edge. Always use HTTPS (or localhost) and a service worker. Internet Explorer has no Push API.

Frequently Asked Questions

new PushEvent(type, options) creates a PushEvent object. It is exposed only in a service worker context and represents a push message (or subscription change) in the Push API.
No. MDN marks the PushEvent() constructor as Baseline Widely available (since March 2023). It is not Deprecated, Experimental, or Non-standard.
Only inside a service worker global scope, in a secure context (HTTPS or localhost). It is not available on the main window thread.
The type is case-sensitive. Browsers set it to push for incoming push messages and pushsubscriptionchange when a push subscription changes (MDN).
An optional payload (string, ArrayBuffer, Blob, and similar). The resulting PushEvent.data property is a PushMessageData object you can read with text(), json(), arrayBuffer(), or blob().
addEventListener listens for push events the browser delivers. The constructor lets you create a PushEvent manually—useful for tests or learning how event.data is shaped.

Next: data property

Learn how to read PushMessageData from every push event.

data property →

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)

11 people found this page helpful

JavaScript Introduction JavaScript PushEvent data Property