Push-Benachrichtigungen sind eine großartige Möglichkeit, schnelle Nachrichten an die Benutzer zu senden. Erfahren Sie, wie Sie sie mithilfe von JavaScript senden, ohne eine externe Bibliothek zu verwenden.

JavaScript-Benachrichtigungen sind eine Möglichkeit, Nachrichten in Echtzeit an Ihre Benutzer zu senden. Sie können sie verwenden, um über Ihre Website-Updates, neue Chat-Nachrichten, E-Mails oder alle Social-Media-Aktivitäten zu benachrichtigen. Sie können Benachrichtigungen auch für Kalendererinnerungen verwenden (z. B. an eine bevorstehende Besprechung auf Google Meet oder Zoom).

Erfahren Sie, wie Sie Ereignisbenachrichtigungen in JavaScript erstellen und an Ihr Telefon oder Ihren Webbrowser senden. Dies erreichen Sie mit integriertem, clientseitigem JavaScript – keine externe Bibliothek erforderlich!

Bitte um Erlaubnis zum Senden von Benachrichtigungen

Um eine Benachrichtigung zu erstellen, müssen Sie die anrufen Benachrichtigung Klasse, um ein Objekt zu erstellen. Sie erhalten Zugriff auf verschiedene Eigenschaften und Methoden, mit denen Sie Ihre Benachrichtigung konfigurieren können. Bevor Sie jedoch eine Benachrichtigung erstellen, müssen Sie zunächst die Erlaubnis des Benutzers einholen.

Das folgende JavaScript fordert die Erlaubnis zum Senden von Benutzerbenachrichtigungen an. Der um Erlaubnis bitten Der Aufruf gibt eine Nachricht zurück, die angibt, ob der Browser Benachrichtigungen zulässt oder nicht:

const Taste = dokumentieren.querySelector('Taste')
 button.addEventListener("klicken", ()=> {
 Notification.requestPermission().then(Erlaubnis => {
 Warnung (Erlaubnis)
 })
})

Wenn Sie auf die Schaltfläche klicken, erhalten Sie möglicherweise eine Warnung mit der folgenden Meldung: bestritten. Dies bedeutet, dass der Browser JavaScript daran gehindert hat, Ereignisbenachrichtigungen zu senden. Der Berechtigungsstatus ist bestritten für Fälle, in denen der Benutzer ausdrücklich verhindert hat, dass die Websites Benachrichtigungen senden (über die Browsereinstellungen) oder der Benutzer im Inkognito-Modus surft.

In solchen Fällen ist es besser, die Entscheidung des Benutzers für abgelehnte Benachrichtigungen zu respektieren und ihn nicht weiter zu belästigen.

Senden grundlegender Benachrichtigungen

Sie erstellen eine Push-Benachrichtigung, indem Sie eine erstellen Benachrichtigung Objekt mit dem neuen Schlüsselwort. Weitere Informationen zur objektorientierten Programmierung finden Sie in unserem Leitfaden unter wie man Klassen in JavaScript erstellt.

Da Sie Benachrichtigungen nur senden würden, wenn die Erlaubnis erteilt wird, müssen Sie sie in eine einschließen Wenn überprüfen.

const Taste = dokumentieren.querySelector('Taste')
button.addEventListener("klicken", ()=> {
 Notification.requestPermission().then(Dauerwelle => {
Wenn(Dauerwelle 'gewährt') {
neu Benachrichtigung(„Beispielbenachrichtigung“)
 }
 })
})

Klicken Sie auf die Schaltfläche und Sie erhalten unten rechts in Ihrem Webbrowser eine Push-Benachrichtigung mit dem angegebenen Text.

Dies ist die einfachste Methode zum Erstellen von Benachrichtigungen und funktioniert sowohl auf Ihrem Telefon als auch auf Ihrem Computer. Schauen wir uns einige erweiterte Benachrichtigungseigenschaften an.

Erweiterte Benachrichtigungseigenschaften

Zusätzlich zum Benachrichtigungstitel können Sie beim Erstellen des Benachrichtigungsobjekts auch ein Optionsargument an den Konstruktor übergeben. Dieses Optionsargument muss ein Objekt sein. Hier können Sie mehrere Optionen hinzufügen, um Ihre Benachrichtigung anzupassen.

Die Körpereigenschaft

Die erste Eigenschaft, die Sie kennen sollten, ist Körper Eigentum. Damit fügen Sie Ihrer Benachrichtigung einen Text hinzu, normalerweise um weitere Informationen in Textform zu übermitteln. Hier ist ein einfaches Beispiel:

const Taste = dokumentieren.querySelector('Taste')
button.addEventListener("klicken", ()=> {
 Notification.requestPermission().then(Dauerwelle => {
Wenn(Dauerwelle 'gewährt') {
neu Benachrichtigung(„Beispielbenachrichtigung“, {
 Körper: „Das ist mehr Text“,
 })
 }
 })
})

Wenn Sie diesen Code ausführen, wird der Textkörper in der Push-Benachrichtigung unter dem angezeigt Beispielbenachrichtigung Header.

Das Datenattribut

Oft möchten Sie Benachrichtigungen möglicherweise benutzerdefinierte Daten hinzufügen. Möglicherweise möchten Sie eine bestimmte Fehlermeldung anzeigen, wenn die Berechtigung verweigert wird, oder Daten speichern, die Sie von einer API erhalten haben. In all diesen Fällen können Sie die verwenden Daten -Eigenschaft, um Ihrer Benachrichtigung benutzerdefinierte Daten hinzuzufügen.

button.addEventListener("klicken", ()=> {
 Notification.requestPermission().then(Dauerwelle => {
Wenn(Dauerwelle 'gewährt') {
const Benachrichtigung = neu Benachrichtigung(„Beispielbenachrichtigung“, {
 Körper: „Das ist mehr Text“,
 Daten: {Hallo: "Welt"}
 })

 Warnung (notification.data.hello)
 }
 })
})

Sie können auf die Daten zugreifen Daten Eigenschaft ähnlich wie im obigen Codeblock gezeigt (innerhalb der Alarm()).

Sie können auch Ereignis-Listener an Ihre Benachrichtigungen binden. Der folgende Ereignis-Listener wird beispielsweise immer dann ausgeführt, wenn Sie die Push-Benachrichtigung schließen. Die Rückruffunktion protokolliert einfach die benutzerdefinierte Nachricht.

const Benachrichtigung = neu Benachrichtigung(„Beispielbenachrichtigung“, { 
 Körper: „Das ist mehr Text“,
 Daten: {Hallo: "Welt"} 
})
Benachrichtigung. addEventListener("schließen", e => {
Konsole.log (e.target.data.hello)
})

Dies ist eine hervorragende Möglichkeit, Daten weiterzugeben, wenn Sie etwas tun müssen, wenn jemand eine Benachrichtigung schließt oder darauf klickt. Neben dem schließen Ereignis (das ausgeführt wird, wenn Sie die Benachrichtigung schließen) sollten Sie diese beibehalten Ereignis-Listener in Deiner Vorstellung:

  • zeigen: Wird ausgeführt, wenn die Benachrichtigung angezeigt wird.
  • klicken: Wird ausgeführt, wenn der Benutzer auf eine beliebige Stelle in der Benachrichtigung klickt.
  • Fehler: Wird ausgeführt, wenn Sie JavaScript die Berechtigung zum Senden von Benachrichtigungen verweigern.

Die Icon-Eigenschaft

Der Symbol Die Eigenschaft dient zum Hinzufügen eines Symbols zur Push-Benachrichtigung. Angenommen, Sie haben ein Symbollogo mit dem Namen logo.png im aktuellen Verzeichnis können Sie es in Ihren Benachrichtigungen wie folgt verwenden:

const Benachrichtigung = neu Benachrichtigung(„Beispielbenachrichtigung“, { 
 Symbol: „logo.png“
})

Wenn Sie Schwierigkeiten haben, eine Verknüpfung zu Ihren Dateien herzustellen, müssen Sie dies tun die Funktionsweise relativer und absoluter URLs verstehen.

Wenn Sie die Datei speichern, den Browser aktualisieren und auf die Schaltfläche klicken, wird das Bild der Benachrichtigung links in der Kopfzeile und im Text angezeigt.

Das Tag-Attribut

Wenn Sie das einstellen Schild Wenn Sie in Ihrer Benachrichtigung ein Attribut hinzufügen, geben Sie der Benachrichtigung grundsätzlich eine eindeutige ID. Zwei Benachrichtigungen können nicht zusammen existieren, wenn sie dasselbe Tag haben. Stattdessen überschreibt die neueste Benachrichtigung die ältere Benachrichtigung.

Betrachten Sie unser vorheriges Schaltflächenbeispiel (ohne Tag). Wenn Sie dreimal schnell hintereinander auf die Schaltfläche klicken, werden die drei Benachrichtigungen angezeigt und übereinander gestapelt. Nehmen wir nun an, Sie haben der Benachrichtigung das folgende Tag hinzugefügt:

const Benachrichtigung = neu Benachrichtigung(„Beispielbenachrichtigung“, { 
 Körper: „Das ist mehr Text“,
 Schild: „Mein neuer Tag“
})

Wenn Sie erneut auf die Schaltfläche klicken, wird nur ein Benachrichtigungsfeld angezeigt. Bei jedem weiteren Klick wird die vorherige Benachrichtigung überschrieben, sodass immer nur eine Benachrichtigung angezeigt wird, egal wie oft Sie auf die Schaltfläche klicken. Dies ist nützlich, wenn Sie dynamische Daten hinzufügen möchten (wie Math.random()) zum Körper:

const Benachrichtigung = neu Benachrichtigung(„Beispielbenachrichtigung“, { 
 Körper: Mathematik.willkürlich()
 Symbol: „logo.png“,
 Schild: „Mein Body-Tag“
})

Jedes Mal, wenn Sie auf die Schaltfläche klicken, wird eine neue Nummer angezeigt. Verwenden Sie die Tag-Eigenschaft, wenn Sie eine aktuelle Benachrichtigung mit neuen darin enthaltenen Informationen überschreiben möchten. In einer Messaging-App können Sie beispielsweise das Tag-Attribut verwenden, um die Benachrichtigung mit neuen Nachrichten zu überschreiben.

Ein Beispiel für Push-Benachrichtigung mit JavaScript

Das folgende Beispiel erkennt jedes Mal, wenn Sie den Fokus auf Ihrer Seite verlieren (z. B. wenn Sie die Seite schließen oder einen neuen Tab öffnen). In diesem Fall sendet der Code eine Benachrichtigung, in der Sie zur Rückgabe aufgefordert werden:

lassen Benachrichtigung
dokumentieren.addEventListener(„Sichtbarkeitsänderung“, ()=> {
Wenn(dokumentieren.visibilityState "versteckt") {
 Benachrichtigung = neu Benachrichtigung("Komm bitte zurück", {
 Körper: „Geh noch nicht :(“
 Schild: "Komm zurück"
 })
 } anders {
 Benachrichtigung.close()
 }
})

Wenn Sie den Fokus auf dieser Seite verlieren, erhalten Sie eine Benachrichtigung, in der Sie aufgefordert werden, zur Seite zurückzukehren. Aber sobald Sie zur Seite zurückkehren, wird die anders Block wird ausgeführt, wodurch die Push-Benachrichtigung geschlossen wird. Diese Technik eignet sich hervorragend in Situationen, in denen Sie dem Benutzer nach dem Verlassen Ihrer Seite Informationen geben möchten.

Erfahren Sie mehr über JavaScript

Die Ereignisbenachrichtigung ist nur eine der zahlreichen Funktionen, die Sie in JavaScript finden können. Um wirklich gut mit Benachrichtigungen umgehen zu können, müssen Sie zunächst die grundlegenden Sprachfunktionen und die Syntax von JavaScript beherrschen. Das Erstellen einfacher Spiele ist eine Möglichkeit, Ihre Fähigkeiten zu verbessern und sich mit den Grundkonzepten der Sprache vertraut zu machen.