So implementieren Sie die Web Notification-Desktop-Benachrichtigungsfunktion in HTML5

Manchmal sehen wir diese Eingabeaufforderung in der unteren rechten Ecke des Desktops:

Bei dieser Desktop-Eingabeaufforderung handelt es sich um die neue Web-Push-Benachrichtigungstechnologie von HTML5.

Die Web-Benachrichtigungstechnologie ermöglicht es Seiten, Benachrichtigungen auszugeben, die auf Systemebene außerhalb der Seite angezeigt werden. Es kann Benutzern ein besseres Erlebnis bieten und sie können Nachrichtenbenachrichtigungen von der Seite erhalten, selbst wenn sie mit anderen Aufgaben beschäftigt sind, z. B. eine Erinnerung an eine neue E-Mail oder eine Nachrichtenerinnerung, die sie in einem Online-Chatroom erhalten haben, usw.

PS: Neben dem IE unterstützen alle gängigen modernen Browser diesen Desktop-Push grundsätzlich.

Start

Um eine Nachrichtenbenachrichtigung zu erstellen, verwenden Sie einfach die Notification-Klasse unter dem Fensterobjekt.

 var n = neue Benachrichtigung (Desktop Push, { icon: 'img/icon.png', body: 'Dies ist meine erste Desktop-Benachrichtigung.', image:'img/1.jpg'});

Dann sehen Sie die Benachrichtigung über den Screenshot, den ich oben gemacht habe, auf dem Systemdesktop.

PS: Die Nachrichtenbenachrichtigung wird nur wirksam, wenn über den Webdienst auf die Seite zugegriffen wird. Wenn Sie direkt doppelklicken, um eine lokale Datei zu öffnen, hat dies keine Auswirkung. Das heißt, Ihre Datei muss auf dem Server geöffnet werden, anstatt die lokale Datei direkt mit dem Browser zu öffnen.

Natürlich kann es sein, dass Sie nichts sehen, also machen Sie sich keine Sorgen und lesen Sie weiter.

Bevor Sie die obige Benachrichtigung anzeigen möchten, müssen Sie natürlich die grundlegende Syntax einer Benachrichtigung verstehen:

 let myNotification = new Notification(title, options);

Titel: Definiert einen Titel für die Benachrichtigung, der oben im Benachrichtigungsfenster angezeigt wird, wenn diese ausgelöst wird.

Das Optionsobjekt (optional) enthält alle benutzerdefinierten Einstellungsoptionen, die für die Benachrichtigung gelten.

body: Der Text der Benachrichtigung, der unter dem Titel angezeigt wird.

Tag: Ähnlich der ID jeder Benachrichtigung, sodass die Benachrichtigung bei Bedarf aktualisiert, ersetzt oder entfernt werden kann.

Symbol: Symbol zum Anzeigen von Benachrichtigungen

Bild: Die URL des Bildes, das im Benachrichtigungstext angezeigt werden soll.

Daten: Alle Daten, die Sie mit der Benachrichtigung verknüpfen möchten. Dies kann ein beliebiger Datentyp sein.

renotify: Ein boolescher Wert, der angibt, ob der Benutzer benachrichtigt werden soll, nachdem eine neue Benachrichtigung eine alte ersetzt. Der Standardwert ist false, was bedeutet, dass sie nicht benachrichtigt werden.

requireInteraction: gibt an, dass die Benachrichtigung aktiv bleiben soll, bis der Benutzer darauf klickt oder sie schließt, anstatt automatisch zu schließen. Der Standardwert ist false.

Wenn dieser Code ausgeführt wird, fragt der Browser den Benutzer, ob die Site die Anzeige von Nachrichtenbenachrichtigungen zulassen soll, wie in der folgenden Abbildung dargestellt:

Benachrichtigungen werden nur angezeigt, wenn der Benutzer auf Zulassen klickt und Benachrichtigungen autorisiert.

Wie erfahre ich, ob der Benutzer auf „Zulassen“ oder „Blockieren“ klickt?

Die Notification-Instanz von window verfügt über eine requestPermission-Funktion, um den Autorisierungsstatus des Benutzers abzurufen:

 // Zuerst prüfen wir, ob wir die Berechtigung zum Anzeigen von Benachrichtigungen haben // Wenn nicht, beantragen wir die Berechtigung if (window.Notification && Notification.permission !== grant) { Notification.requestPermission(function (status) { //status is der Autorisierungsstatus. //Wenn der Benutzer auf „Zulassen“ klickt, wird der Status „gewährt“ // Wenn der Benutzer auf „Deaktivieren“ klickt, wird der Status „verweigert“ // Dadurch können wir Notification.permission in Chrome/Safari verwenden (Notification.permission !== status) { Notification.permission = status } });

Hinweis: Wenn der Benutzer auf die Schaltfläche „Schließen“ in der oberen rechten Ecke der Autorisierung klickt, ist der Statuswert der Standardwert.

Danach müssen wir nur noch feststellen, ob der Statuswert gewährt wird, um zu entscheiden, ob die Benachrichtigung angezeigt werden soll.

Das bloße Anzeigen eines Nachrichtenfelds ist jedoch unattraktiv, daher sollten Nachrichtenbenachrichtigungen ein gewisses Maß an Interaktivität aufweisen und Ereignisse vor und nach der Anzeige der Nachricht eingebunden sein.

Notification hat von Anfang an eine Reihe von Ereignisfunktionen formuliert. Entwickler können diese Funktionen verwenden, um Benutzerinteraktionen umfassend zu verarbeiten:

Es gibt: onshow, onclick, onerror, onclose.

 var n = new Notification(Desktop push, { icon: 'img/icon.png', body: 'Dies ist meine erste Desktop-Benachrichtigung.'}); //onshow-Funktion wird ausgelöst, wenn das Meldungsfeld angezeigt wird // OK Do Einige Daten aufzeichnen und das Meldungsfeld regelmäßig schließen n.onshow = function() { console.log('Display message box'); //Schließe das Meldungsfeld nach 5 Sekunden setTimeout(function() { n.close(); } , 3000);};//Wird aufgerufen, wenn auf das Meldungsfeld geklickt wird //Sie können gleichzeitig die entsprechende Ansicht öffnen, das Meldungsfeld schließen und andere Vorgänge ausführen n.onclick = function() { console.log('Klicken Sie auf die Nachricht box'); // Öffnen Sie die entsprechende Ansicht n.close();};//Wenn ein Fehler auftritt, wird die Funktion onerror aufgerufen. //Wenn keine erteilte Berechtigung vorliegt, wird die Funktion onerror auch beim Erstellen eines ausgeführt Benachrichtigungsobjektinstanz n.onerror = function() { console.log('Meldungsbox-Fehler'); // Andere Dinge tun}; // Die Onclose-Funktion wird aufgerufen, wenn eine Meldungsbox geschlossen wird n.onclose = function() { console.log('Schließe die Meldungsbox' ) ; //Mach etwas anderes};

ein einfaches Beispiel

 <!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>Dokument</title> </head> <body> <button>Klicken, um Benachrichtigung zu initiieren</button> < / body> <script> window.addEventListener(load, function() { // Zuerst prüfen wir, ob wir die Berechtigung zum Senden von Benachrichtigungen haben // Wenn nicht, fragen wir um Erlaubnis if (window.Notification && Notification.permission !== gewährt) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } } } var button = document.getElementsByTagName(button)[0]; button.addEventListener(click, function() { // Benachrichtigung erstellen, wenn der Benutzer zustimmt if (window.Notification && Notification.permission === grant) { var n = new Notification(Hi!); } // Wenn der Benutzer nicht auswählt, ob Benachrichtigungen angezeigt werden sollen // Hinweis: Da wir in Chrome nicht feststellen können, ob das Berechtigungsattribut einen Wert hat, ist es unsicher, // den Wert dieses Attributs zu überprüfen ist Standard, sonst. if (window.Notification && Notification.permission !== denied) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } // Wenn der Benutzer zustimmt if (status === grant) { var n = new Notification(Hi! } }); // Wenn der Benutzer die Annahme der Benachrichtigung ablehnt, können wir einen Kompromiss eingehen und den regulären Alarmmodus verwenden (Hallo! } });

Wenn wir die Benutzeroberfläche öffnen, wird eine Autorisierungsanwendung angezeigt. Wenn wir auf „Zulassen“ und dann auf die Schaltfläche klicken, wird eine Benachrichtigung an den Desktop gesendet, die wir in der unteren rechten Ecke des Desktops sehen können.

Oben zeigen wir nur eine Nachricht an.

 if (Status === gewährt) { var n = neue Benachrichtigung (Hi);}

Wenn wir beispielsweise viele Nachrichten haben, verwende ich eine for-Schleife, um eine große Anzahl von Benachrichtigungen zu simulieren.

 for(var i=0; i<10; i++) { var n = new Notification(Hi,+i);}

Sie können sehen, dass 10 Benachrichtigungen angezeigt werden. In manchen Fällen kann die Anzeige einer großen Anzahl von Benachrichtigungen für Benutzer jedoch schmerzhaft sein.

Zum Beispiel, wenn eine Instant-Messaging-App den Benutzer bei jeder eingehenden Nachricht auffordert. Um zu vermeiden, dass der Desktop eines Benutzers mit Hunderten unnötiger Benachrichtigungen überflutet wird, kann es erforderlich sein, eine Warteschlange ausstehender Nachrichten zu übernehmen.

Daher muss der neu erstellten Benachrichtigung ein Tag hinzugefügt werden.

Wenn es eine neue Benachrichtigung mit demselben Tag wie die vorherige Benachrichtigung gibt, ersetzt die neue Benachrichtigung die vorherige Benachrichtigung und nur die neueste Benachrichtigung wird auf dem Desktop angezeigt.

Wenn Sie weiterhin das obige Beispiel verwenden, müssen Sie der Auslöserbenachrichtigung nur ein Tag-Attribut hinzufügen:

 for (var i = 0; i < 10; i++) { // Schließlich wird nur die Benachrichtigung mit Inhalt Hi! 9 angezeigt var n = new Notification(Hi! + i, {tag: 'soManyNotification'});}

Die Nachrichtenbenachrichtigung ist eine gute Funktion, schließt jedoch nicht aus, dass einige Websites diese Funktion in böswilliger Absicht verwenden. Sobald der Benutzer sie autorisiert, werden von Zeit zu Zeit einige unfreundliche Nachrichten gesendet, die die Arbeit des Benutzers stören Die Berechtigungen der Site deaktivieren.

Wir können auf das Ausrufezeichen auf der linken Seite des Adresseingabefelds des Browsers klicken und es wird eine Benachrichtigungsoption angezeigt, und wir können die Autorisierung ändern. Alternativ besteht die Möglichkeit, die Benachrichtigung auf der Benachrichtigungsseite zu ändern, und Sie können die Autorisierungsbenachrichtigung entsprechend der spezifischen Situation ändern.

Damit ist die grundlegendste Web-Benachrichtigung implementiert.

Das Obige ist die Implementierungsmethode der vom Herausgeber eingeführten Web Notification-Desktop-Benachrichtigungsfunktion. Ich hoffe, dass sie Ihnen hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!