PushEvent: data property
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 data
read-only property of the PushEvent
interface returns a reference to a PushMessageData
object containing data sent to the PushSubscription
.
Value
A PushMessageData
object or null
if no data
member is passed when the event instance initialized.
Examples
The following example takes data from a PushEvent and displays it on all of the service workers' clients.
js
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 icon = "images/new-notification.png";
const notification = new Notification(title, {
body: message,
tag: "simple-push-demo-notification",
icon,
});
notification.addEventListener("click", () => {
clients.openWindow(
"https://example.blog.com/2015/03/04/something-new.html",
);
});
});
Specifications
Specification |
---|
Push API # dom-pushevent-data |
Browser compatibility
BCD tables only load in the browser