Die Verwendung der HTML5-Nachrichtenbenachrichtigung (Webbenachrichtigung)

Ich habe viele Artikel über HTML5 geschrieben, aber ich habe immer das Gefühl, dass ich die relevanten High-Level-APIs durchgehen muss. Nur wenn wir das System verstehen und auf einer höheren Ebene über Probleme nachdenken, können wir mit halbem Aufwand das Doppelte des Ergebnisses erzielen.

Versuchen wir zunächst das einfachste Beispiel. Öffnen Sie die chrome Entwicklertools, fügen Sie den Code ein und führen Sie ihn direkt aus:

 new Notification('Jartto/'s Nachrichtenbenachrichtigung', { dir: 'rtl', body: 'Dies ist eine Nachricht, die als Test über Web Notification gesendet wurde!', icon: 'https://raw.githubusercontent.com / chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

Es erscheint keine Nachrichtenbenachrichtigung. Was ist los? Machen Sie sich keine Sorgen, lesen Sie weiter.

Gemäß dem obigen Beispiel haben wir es ausgeführt, die Nachrichten-Push-Box jedoch nicht erfolgreich aktiviert. Zu diesem Zeitpunkt müssen Sie überprüfen, ob der Benutzer berechtigt ist. Geben Sie in der Konsole ein: > Notification.permission

Bald werden wir feststellen, dass die ursprüngliche Benutzerberechtigung default ist. Da die Auswahl des Benutzers nicht bekannt ist, ist das Verhalten des Browsers dasselbe wie denied , also „verweigern“.

Wenn man diese High-Level API von HTML5 sieht, gibt es immer einige Bedenken. Obwohl das Beispiel gut und einfach zu verwenden ist, lohnt es sich, über die Kompatibilität nachzudenken.

Wie Sie sehen, wird es im Grunde von allen Browsern unterstützt, außer iOS Safari und Opera Mini , daher ist bei mobilen Anwendungen Vorsicht geboten.

4. API-Dokumentation

Lassen Sie uns zunächst die API systematisch durchgehen. Es ist ganz einfach.

Anwendungsfall:

 let notification = neue Benachrichtigung (Titel, Optionen)

Parameter:

Titel: Der Benachrichtigungstitel, der definitiv angezeigt wird

Optionen: Ein Objekt, das Benachrichtigungen festlegen darf. Es enthält die folgenden Eigenschaften:

• dir: Die Richtung des Textes; sein Wert kann auto (automatisch), ltr (von links nach rechts) oder rtl (von rechts nach links) sein.
• lang: Gibt die in Benachrichtigungen verwendete Sprache an. Diese Zeichenfolge muss im BCP 47-Sprach-Tag-Dokument gültig sein.
• body: Zusätzliche Zeichenfolge, die in der Benachrichtigung angezeigt wird
• Tag: Geben Sie der Benachrichtigung eine ID, damit die Benachrichtigung bei Bedarf aktualisiert, ersetzt oder entfernt werden kann.
• Symbol: Die URL eines Bildes, das zur Anzeige des Benachrichtigungssymbols verwendet wird.

Eigentum:

Notification.permission: Eine Zeichenfolge, die den Autorisierungsstatus der aktuellen Benachrichtigungsanzeige angibt. Mögliche Werte sind:

• denied (der Benutzer hat die Anzeige der Benachrichtigung verweigert),
• granted (der Benutzer hat die Anzeige der Benachrichtigung zugelassen),
• default (da die Auswahl des Benutzers nicht bekannt ist, verhält sich der Browser genauso wie bei denied )

Verfahren:

• Notification.onclick: Verarbeitet das Klickereignis, das jedes Mal ausgelöst wird, wenn der Benutzer auf die Benachrichtigung klickt.
• Notification.onshow: behandelt das Show-Ereignis, das ausgelöst wird, wenn die Benachrichtigung angezeigt wird.
• Notification.onerror: Behandelt das Fehlerereignis, das immer dann ausgelöst wird, wenn die Benachrichtigung auf einen Fehler stößt.
• Notification.onclose: Verarbeitet das Schließereignis, das ausgelöst wird, wenn der Benutzer die Benachrichtigung schließt.
• Notification.requestPermission(): Wird für die aktuelle Seite verwendet, um beim Benutzer die Berechtigung zum Anzeigen von Benachrichtigungen zu beantragen.
• Notification.close(): wird zum Schließen von Benachrichtigungen verwendet.

Notification.requestPermission Diese Methode kann nur durch Benutzerverhalten (z. B. Onclick-Ereignis) aufgerufen werden und kann nicht von anderen Methoden aufgerufen werden.

Schreiben wir gemäß der obigen API ein vollständiges Beispiel:

 function notifyMe(){ // Überprüfen Sie zunächst, ob der Browser if (!(Benachrichtigung im Fenster)) unterstützt { Alert(Dieser Browser unterstützt keine Desktop-Benachrichtigungen } // Überprüfen Sie, ob der Benutzer dem Empfang von Benachrichtigungen zustimmt else if (Benachrichtigung); Erlaubnis = == gewährt) { // Wenn es in Ordnung ist, erstellen wir eine Benachrichtigung var notification = new Notification(Hallo!); ') { Notification.requestPermission(function (permission){ // Wenn der Benutzer zustimmt, können Sie ihm eine Benachrichtigung senden if (permission === gewährt) { var notification = new Notification(Hallo!); } } } // Endlich , Wenn die Ausführung diesen Punkt erreicht, bedeutet dies, dass der Benutzer sich geweigert hat, die entsprechenden Benachrichtigungen zu autorisieren // Aus Respekt sollten wir sie nicht mehr stören}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.