Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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

js
showNotification(title)
showNotification(title, options)

Parameter

title

Definiert einen Titel für die Benachrichtigung, der oben im Benachrichtigungsfenster angezeigt wird.

options Optional

Ein Optionsobjekt, das benutzerdefinierte Einstellungen enthält, die Sie auf die Benachrichtigung anwenden möchten. Die möglichen Optionen sind:

actions Optional Experimentell

Ein Array von Aktionen, die in der Benachrichtigung angezeigt werden sollen, wobei die Standardeinstellung 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 wird.

title

Ein String, der den angezeigten Aktionstext für den Benutzer enthält.

icon Optional

Ein String, der die URL eines Icons enthält, das mit der Aktion angezeigt werden soll.

Geeignete Antworten werden im event.action innerhalb des notificationclick Ereignisses aufgebaut.

badge Optional Experimentell

Ein String, der die URL des Bildes enthält, das verwendet wird, um die Benachrichtigung zu repräsentieren, wenn nicht genug Platz ist, um die eigentliche Benachrichtigung anzuzeigen; zum Beispiel die Android-Benachrichtigungsleiste. Auf Android-Geräten sollte das Badge Geräte mit bis zu 4-facher Auflösung, etwa 96x96px, unterstützen, und das Bild wird automatisch maskiert.

body Optional

Ein String, der den Textkörper der Benachrichtigung darstellt, der unter dem Titel angezeigt wird. Standard ist der leere String.

data Optional Experimentell

Beliebige Daten, die Sie mit der Benachrichtigung verknüpfen möchten. Dies kann jeder structured-clonable Datentyp sein. Standard ist null.

dir Optional

Die Richtung, in der die Benachrichtigung angezeigt werden soll. Standard ist auto, was einfach das Sprachverhalten des Browsers übernommen wird, aber Sie können dieses Verhalten überschreiben, indem Sie Werte von ltr und rtl setzen (obwohl die meisten Browser diese Einstellungen zu ignorieren scheinen).

icon Optional

Ein String, der die URL eines Icons enthält, das in der Benachrichtigung angezeigt werden soll.

image Optional Experimentell

Ein String, der die URL eines Bildes enthält, das in der Benachrichtigung angezeigt werden soll.

lang Optional

Die Sprache der Benachrichtigung, angegeben durch einen String, der ein BCP 47 language tag repräsentiert. Standard ist der leere String.

renotify Optional Experimentell

Ein boolescher Wert, der angibt, ob der Benutzer benachrichtigt werden soll, nachdem eine neue Benachrichtigung eine alte ersetzt. Standard ist false, was bedeutet, dass sie nicht benachrichtigt werden. Wenn true, dann muss auch tag gesetzt sein.

requireInteraction Optional Experimentell

Gibt an, dass eine Benachrichtigung aktiv bleiben soll, bis der Benutzer darauf klickt oder sie verwirft, anstatt sie automatisch zu schließen. Der Standardwert ist false.

silent Optional

Ein boolescher Wert, der angibt, ob die Benachrichtigung stumm ist (keine Geräusche oder Vibrationen ausgegeben), unabhängig von den Geräteeinstellungen. Der Standard, null, bedeutet, die Gerätestandards zu respektieren. Wenn true, darf vibrate nicht vorhanden sein.

tag Optional

Ein String, der einen identifizierenden Tag für die Benachrichtigung darstellt. Standard ist der leere String.

timestamp Optional

Ein Zeitstempel, angegeben als Unix time in Millisekunden, der die Zeit repräsentiert, die mit der Benachrichtigung verbunden ist. Dies kann 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 bald beginnt.

vibrate Optional Experimentell

Ein Vibrationsmuster für die Vibrationseinrichtung des Geräts, das mit der Benachrichtigung ausgegeben werden soll. Wenn angegeben, darf silent nicht true sein.

Rückgabewert

Ein Promise, der sich zu undefined auflöst.

Ausnahmen

TypeError

Ausgelöst, wenn:

  • Der aktuelle Zustand des Service Workers nicht activating oder activated ist.
  • Der Benutzer dem Berechtigungsantrag des Browsers zur Nutzung der API ausdrücklich widerprochen hat.
  • Die silent Option true ist und die vibrate Option angegeben ist.
  • Die renotify Option true ist, aber die tag Option leer ist.
DataCloneError DOMException

Ausgelöst, wenn die Serialisierung der data Option aus irgendeinem Grund fehlgeschlagen ist.

Beispiele

js
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 obige Funktion zu einem geeigneten Zeitpunkt aufzurufen, könnten Sie dem notificationclick Ereignis lauschen.

Sie können auch Details der von dem aktuellen Service Worker ausgelösten Notification abrufen, indem Sie ServiceWorkerRegistration.getNotifications() verwenden.

Spezifikationen

Specification
Notifications API
# dom-serviceworkerregistration-shownotification

Browser-Kompatibilität