ServiceWorkerGlobalScope: notificationclick Ereignis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 des ServiceWorkerGlobalScope Interfaces wird ausgelöst, um anzuzeigen, dass eine durch ServiceWorkerRegistration.showNotification() erzeugte Systembenachrichtigung angeklickt wurde.
Benachrichtigungen, die im Hauptthread oder in Workern, die keine Service Worker sind, mit dem Notification() Konstruktor erstellt werden,
erhalten stattdessen ein click Ereignis auf dem Notification Objekt selbst.
Dieses Ereignis ist nicht abfangbar und wird nicht fortgepflanzt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("notificationclick", (event) => { })
onnotificationclick = (event) => { }
Ereignistyp
Ein NotificationEvent. Erbt von ExtendableEvent und Event.
Ereigniseigenschaften
Erbt Eigenschaften von seinen Vorfahren, ExtendableEvent und Event.
NotificationEvent.notificationSchreibgeschützt-
Gibt ein
NotificationObjekt zurück, das die Benachrichtigung darstellt, die angeklickt wurde, um das Ereignis auszulösen. NotificationEvent.actionSchreibgeschützt-
Gibt die Zeichenfolgen-ID des Benachrichtigungsbuttons zurück, den der Benutzer angeklickt hat. Dieser Wert gibt eine leere Zeichenfolge zurück, wenn der Benutzer die Benachrichtigung irgendwo anders als auf einem Aktionsbutton angeklickt hat oder die Benachrichtigung keinen Button hat.
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 die onnotificationclick Ereignishandler-Eigenschaft verwenden:
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 mithilfe von event.action innerhalb eines notificationclick Ereignishandlers behandeln:
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
| Specification |
|---|
| Notifications API # activating-a-notification |
| Notifications API # dom-serviceworkerglobalscope-onnotificationclick |
Browser-Kompatibilität
Loading…