ServiceWorkerGlobalScope: notificationclick-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Das notificationclick-Ereignis der ServiceWorkerGlobalScope-Schnittstelle wird ausgelöst, um anzuzeigen, dass eine vom ServiceWorkerRegistration.showNotification() erzeugte Systembenachrichtigung angeklickt wurde.
Benachrichtigungen, die im Haupt-Thread oder in Workern, die keine Service Worker sind, unter Verwendung des Notification()-Konstruktors erstellt werden, empfangen stattdessen ein click-Ereignis auf dem Notification-Objekt selbst.
Dieses Ereignis ist nicht abbruchfähig und hat keine Bubbling-Eigenschaften.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("notificationclick", (event) => { })
onnotificationclick = (event) => { }
Ereignistyp
Ein NotificationEvent. Erbt von ExtendableEvent und Event.
Beispiele
Sie können das notificationclick-Ereignis in einer addEventListener-Methode verwenden:
self.addEventListener("notificationclick", (event) => {
console.log("On notification click: ", event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients
.matchAll({
type: "window",
})
.then((clientList) => {
for (const client of clientList) {
if (client.url === "/" && "focus" in client) return client.focus();
}
if (clients.openWindow) return clients.openWindow("/");
}),
);
});
Oder verwenden Sie die onnotificationclick-Ereignis-Handler-Eigenschaft:
self.onnotificationclick = (event) => {
console.log("On notification click: ", event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients
.matchAll({
type: "window",
})
.then((clientList) => {
for (const client of clientList) {
if (client.url === "/" && "focus" in client) return client.focus();
}
if (clients.openWindow) return clients.openWindow("/");
}),
);
};
Sie können Ereignisaktionen innerhalb eines notificationclick-Ereignis-Handlers mit event.action verarbeiten:
navigator.serviceWorker.register("sw.js");
Notification.requestPermission().then((result) => {
if (result === "granted") {
navigator.serviceWorker.ready.then((registration) => {
// Show a notification that includes an action titled Archive.
registration.showNotification("New mail from Alice", {
actions: [
{
action: "archive",
title: "Archive",
},
],
});
});
}
});
self.addEventListener("notificationclick", (event) => {
event.notification.close();
if (event.action === "archive") {
// User selected the Archive action.
archiveEmail();
} else {
// User selected (e.g., clicked in) the main body of notification.
clients.openWindow("/inbox");
}
});
Spezifikationen
| Spezifikation |
|---|
| Notifications API # activating-a-notification |
| Notifications API # dom-serviceworkerglobalscope-onnotificationclick |