Ziele des Blogs
Nachdem Sie diesen Blog gelesen haben, können Sie die Desktop-Benachrichtigung für Ihre Site einrichten. Sie können Ihre Benachrichtigung auch über Ihre eigene Nachricht, Ihr eigenes Bild, Ihr eigenes Symbol usw. anpassen.
Nutzen der Desktop-Benachrichtigung
Angenommen, Sie möchten Ihren Kunden außerhalb der Webseite benachrichtigen, dann können wir die Desktop-Benachrichtigung verwenden, als ob Sie die Desktop-Benachrichtigung für E-Mails aktiviert hätten und Sie nicht regelmäßig E-Mails abrufen müssen. In jeder E-Mail erhalten Sie eine Benachrichtigung.
Code für die Desktop-Benachrichtigung
Fügen Sie die folgende Funktion in das Skript-Tag im Kopf des HTML ein.
Funktion showNotification () {// Überprüfe, ob der Browser des Benutzers Benachrichtigungen unterstützt oder nicht if (! ("Benachrichtigung" im Fenster)) {alert ("Ihr Browser unterstützt die Desktop-Benachrichtigung nicht"); } // Überprüfen Sie, ob die Berechtigungen der Benachrichtigung bereits erteilt wurden oder nicht, wenn (Notification.permission === "grant") {// Create Notification var options = {body: 'Einfache Benachrichtigungsnachrichtenzeile 1. \ NZweite Benachrichtigungsnachrichtenzeile . ', // Nachrichtentext dir:' ltr ', // Nachrichtenrichtung ltr: von links nach rechts. rtl: von rechts nach links. Bild: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Fügen Sie bei Bedarf ein Bild hinzu, um das Symbol anzuzeigen: 'https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Symbol hinzufügen, falls erforderlich, um anzuzeigen} var title = "Knowband Blog"; var notification = new Benachrichtigung (Titel, Optionen); // Den Benachrichtigungs-Klicklink hinzufügen notification.onclick = function (event) {event.preventDefault (); // Verhindern, dass der Browser das Registerfenster der Benachrichtigung fokussiert.open ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Schließen Sie die Benachrichtigung nach dem Klicken.}} // Wenn keine Berechtigungen vorhanden sind, fragen Sie den Benutzer nach weiteren Berechtigungen. if (Notification.permission! == "denied") {Notification.requestPermission (). then (function ( permission) {// Wenn der Benutzer zustimmt, erstellen wir eine Benachrichtigung if (permission === "grant") {var notification = new Benachrichtigung ("Hi there!");}}); }}
Sie können diese Funktion durch Ereignis auslösen, wie Sie möchten. Zu Testzwecken können Sie dies überprüfen, indem Sie eine Schaltfläche hinzufügen. Verwenden Sie den folgenden Code für den Knopf im Körper
<button onclick = "showNotification ()"> Benachrichtigung anzeigen! </ button>
Hinweis: Wenn Sie diesen Code auf dem lokalen System ausführen, verwenden Sie den lokalen Server, dh localhost.
Ausgabebildschirm
