ServiceWorkerGlobalScope: push event

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is only available in Service Workers.

The push event is sent to a service worker's global scope (represented by the ServiceWorkerGlobalScope interface) when the service worker has received a push message.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("push", (event) => {});

onpush = (event) => {};

Event type

A PushEvent. Inherits from Event.

Event ExtendableEvent PushEvent

Event properties

Inherits properties from its parent, ExtendableEvent. Additional properties:

PushEvent.data Read only

Returns a reference to a PushMessageData object containing data sent to the PushSubscription.

Example

This example sets up a handler for push events that takes JSON data, parses it, and dispatches the message for handling based on information contained within the message.

js
self.addEventListener(
  "push",
  (event) => {
    let message = event.data.json();

    switch (message.type) {
      case "init":
        doInit();
        break;
      case "shutdown":
        doShutdown();
        break;
    }
  },
  false,
);

Specifications

Specification
Push API
# extensions-to-the-serviceworkerglobalscope-interface
Push API
# dom-serviceworkerglobalscope-onpush

Browser compatibility

BCD tables only load in the browser

See also