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 Schnittstelle ServiceWorkerGlobalScope wird ausgelöst, wenn auf eine Systembenachrichtigung geklickt wird, die mit ServiceWorkerRegistration.showNotification() erstellt wurde.
Benachrichtigungen, die im Hauptthread oder in Workern, die keine Service Worker sind, mit dem Konstruktor Notification() erstellt wurden, erhalten stattdessen ein click-Ereignis auf dem Notification-Objekt selbst.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht nach oben weitergegeben.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("notificationclick", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onnotificationclick = (event) => { }
Ereignistyp
Ein NotificationEvent. Es erbt von ExtendableEvent und Event.
Beispiele
Sie können das notificationclick-Ereignis mit der Methode addEventListener 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 === new URL("/", self.location.origin).href &&
"focus" in client
) {
return client.focus();
}
}
if (clients.openWindow) return clients.openWindow("/");
}),
);
});
Oder verwenden Sie die Event-Handler-Eigenschaft onnotificationclick (beachten Sie jedoch, dass dadurch gegebenenfalls andere über onnotificationclick hinzugefügte Event-Listener ersetzt werden):
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 === new URL("/", self.location.origin).href &&
"focus" in client
) {
return client.focus();
}
}
if (clients.openWindow) return clients.openWindow("/");
}),
);
};
Sie können Aktionen innerhalb eines Event-Handlers für notificationclick über 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 |