ServiceWorkerRegistration: showNotification() Methode
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2023.
* Some parts of this feature may have varying levels of support.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die showNotification() Methode der ServiceWorkerRegistration Schnittstelle erstellt eine Benachrichtigung auf einem aktiven Service Worker.
Syntax
showNotification(title)
showNotification(title, options)
Parameter
title-
Definiert einen Titel für die Benachrichtigung, der oben im Benachrichtigungsfenster angezeigt wird.
optionsOptional-
Ein Optionsobjekt, das alle benutzerdefinierten Einstellungen enthält, die Sie auf die Benachrichtigung anwenden möchten. Die möglichen Optionen sind:
actionsOptional Experimentell-
Ein Array von Aktionen, die in der Benachrichtigung angezeigt werden sollen, wobei der Standardwert ein leeres Array ist. Jedes Element im Array kann ein Objekt mit den folgenden Mitgliedern sein:
action-
Ein String, der eine Benutzeraktion identifiziert, die auf der Benachrichtigung angezeigt werden soll.
title-
Ein String, der den Aktionstext enthält, der dem Benutzer angezeigt werden soll.
iconOptional-
Ein String, der die URL eines Symbols enthält, das mit der Aktion angezeigt werden soll.
-
Ein String, der eine URL enthält, zu der navigiert wird, wenn der Benutzer diese Aktion aktiviert. Wenn gesetzt, navigiert der User Agent zu dieser URL, anstatt das
notificationclickEreignis auszulösen. SieheNotification.navigatefür weitere Informationen.
Angemessene Antworten werden unter Verwendung von
event.actioninnerhalb desnotificationclickEreignisses erstellt. badgeOptional Experimentell-
Ein String, der die URL des Bildes enthält, das verwendet wird, um die Benachrichtigung darzustellen, wenn nicht genügend Platz vorhanden ist, um die Benachrichtigung selbst anzuzeigen; zum Beispiel die Android-Benachrichtigungsleiste. Auf Android-Geräten sollte das Abzeichen Geräte bis zu einer 4x-Auflösung unterstützen, etwa 96x96px, und das Bild wird automatisch maskiert.
bodyOptional-
Ein String, der den Text des Körpers der Benachrichtigung darstellt, der unter dem Titel angezeigt wird. Der Standard ist der leere String.
dataOptional Experimentell-
Beliebige Daten, die Sie mit der Benachrichtigung verknüpfen möchten. Dies kann jede strukturierbar klonbare Datentyp sein. Der Standard ist
null. dirOptional-
Die Richtung, in der die Benachrichtigung angezeigt werden soll. Der Standard ist
auto, was das Verhalten der Spracheneinstellung des Browsers übernimmt, aber dieses Verhalten kann durch Setzen von Werten vonltrundrtlüberschrieben werden (obwohl die meisten Browser diese Einstellungen scheinbar ignorieren). iconOptional-
Ein String, der die URL eines Symbols enthält, das in der Benachrichtigung angezeigt wird.
imageOptional Experimentell-
Ein String, der die URL eines Bildes enthält, das in der Benachrichtigung angezeigt werden soll.
langOptional-
Die Sprache der Benachrichtigung, wie durch einen String repräsentiert, der ein BCP 47 Sprach-Tag ist. Der Standard ist der leere String.
-
Ein String, der eine URL enthält, zu der navigiert wird, wenn der Benutzer die Benachrichtigung aktiviert. Wenn gesetzt, navigiert der User Agent zu dieser URL, anstatt das
notificationclickEreignis auszulösen. Der Wert wird relativ zur Basis-URL des Service Workers analysiert. SieheNotification.navigatefür weitere Informationen. renotifyOptional Experimentell-
Ein boolescher Wert, der angibt, ob der Benutzer benachrichtigt werden soll, nachdem eine neue Benachrichtigung eine alte ersetzt hat. Der Standard ist
false, was bedeutet, dass sie nicht benachrichtigt werden. Wenntrue, muss auchtaggesetzt sein. requireInteractionOptional Experimentell-
Gibt an, dass eine Benachrichtigung aktiv bleiben sollte, bis der Benutzer sie anklickt oder entfernt, anstatt sie automatisch zu schließen. Der Standardwert ist
false. silentOptional-
Ein boolescher Wert, der angibt, ob die Benachrichtigung stumm ist (keine Töne oder Vibrationen), unabhängig von den Geräteeinstellungen. Der Standard,
null, bedeutet, dass die Gerätevoreinstellungen respektiert werden sollen. Wenntrue, darfvibratenicht vorhanden sein. tagOptional-
Ein String, der ein identifizierendes Tag für die Benachrichtigung darstellt. Der Standard ist der leere String.
timestampOptional-
Ein Zeitstempel, angegeben als Unix-Zeit in Millisekunden, der die mit der Benachrichtigung verbundene Zeit darstellt. Dies könnte in der Vergangenheit liegen, wenn eine Benachrichtigung für eine Nachricht verwendet wird, die nicht sofort zugestellt werden konnte, weil das Gerät offline war, oder in der Zukunft für ein Meeting, das kurz vor dem Start steht.
vibrateOptional Experimentell-
Ein Vibrationsmuster, das die Vibrationshardware des Geräts mit der Benachrichtigung ausführen soll. Wenn angegeben, darf
silentnichttruesein.
Rückgabewert
Ein Promise, das sich auf undefined auflöst.
Ausnahmen
TypeError-
Ausgelöst, wenn:
- Der aktuelle Zustand des Service Workers nicht
activatingoderactivatedist. - Der Benutzer den Browser bei der Berechtigungsanfrage zur Nutzung der API ausdrücklich abgelehnt hat.
- Die Option
silenttrueist und die Optionvibrateangegeben ist. - Die Option
renotifytrueist, aber die Optiontagleer ist.
- Der aktuelle Zustand des Service Workers nicht
DataCloneErrorDOMException-
Ausgelöst, wenn das Serialisieren der
dataOption aus irgendeinem Grund fehlgeschlagen ist.
Beispiele
navigator.serviceWorker.register("sw.js");
function showNotification() {
Notification.requestPermission().then((result) => {
if (result === "granted") {
navigator.serviceWorker.ready.then((registration) => {
registration.showNotification("Vibration Sample", {
body: "Buzz! Buzz!",
icon: "../images/touch/chrome-touch-icon-192x192.png",
vibrate: [200, 100, 200, 100, 200, 100, 200],
tag: "vibration-sample",
});
});
}
});
}
Um die oben genannte Funktion zu einem geeigneten Zeitpunkt aufzurufen, könnten Sie das notificationclick Ereignis verwenden.
Sie können auch Details der Notifications abrufen, die vom aktuellen Service Worker ausgelöst wurden, indem Sie ServiceWorkerRegistration.getNotifications() verwenden.
Spezifikationen
| Specification |
|---|
| Notifications API> # dom-serviceworkerregistration-shownotification> |