Tutorial zum Erstellen von Webbenachrichtigungen mithilfe der HTML5-Benachrichtigungs-API_HTML5-Tutorial-Tipps

Wenn Sie die Webversion von Gmail verwenden, erscheint bei jedem Eingang einer neuen E-Mail ein entsprechendes Eingabeaufforderungsfeld in der unteren rechten Ecke des Bildschirms. Mit der von HTML5 bereitgestellten Benachrichtigungs-API können wir eine solche Funktion auch problemlos implementieren.
Stellen Sie sicher, dass Ihr Browser dies unterstützt

Wenn Sie auf einer bestimmten Version des Browsers entwickeln, empfehle ich Ihnen, zunächst zu caniuse zu gehen, um die Unterstützung des Browsers für die Benachrichtigungs-API zu überprüfen, um zu vermeiden, dass Sie wertvolle Zeit mit einer unbrauchbaren API verschwenden.
So fangen Sie an

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var notification=new Notification('Notification Title',{
2. Text:'Ihre Nachricht'
3. });

Der obige Code erstellt eine einfache Benachrichtigungsleiste. Der erste Parameter des Konstruktors legt den Titel der Benachrichtigungsleiste fest und der zweite Parameter ist ein Optionsobjekt, das die folgenden Eigenschaften festlegen kann:

• Text: Legen Sie den Textinhalt der Benachrichtigungsleiste fest.
  dir: Definieren Sie die Anzeigerichtung des Benachrichtigungsleistentextes, die auf auto (automatisch), ltr (von links nach rechts) oder rtl (von rechts nach links) eingestellt werden kann.
  lang: Deklariert die Sprache, die für den Text in der Benachrichtigungsleiste verwendet wird. (Anmerkung: Der Wert dieses Attributs muss zum BCP 47-Sprachtag gehören.)
  Tag: Weisen Sie der Benachrichtigungsleiste einen ID-Wert zu, um das Abrufen, Ersetzen oder Entfernen der Benachrichtigungsleiste zu erleichtern.
  -Symbol: Legen Sie die URL des Bildes fest, das als Benachrichtigungsleistensymbol
verwendet wird

Erlaubnis einholen

Bevor Sie die Benachrichtigungsleiste anzeigen, müssen Sie die Erlaubnis des Benutzers einholen. Nur mit der Erlaubnis des Benutzers kann die Benachrichtigungsleiste auf dem Bildschirm angezeigt werden. Die Verarbeitung des Genehmigungsantrags hat den folgenden Rückgabewert:

• Standard: Das Ergebnis der Benutzerverarbeitung ist unbekannt, daher geht der Browser davon aus, dass der Benutzer sich weigert, die Benachrichtigungsleiste anzuzeigen. („Browser: Sie haben nicht um Benachrichtigung gebeten, daher werde ich Sie nicht benachrichtigen“)
  verweigert: Der Benutzer weigert sich, die Benachrichtigungsleiste anzuzeigen. („Benutzer: von meinem Bildschirm wegscrollen“)
  gewährt: Der Benutzer lässt zu, dass die Benachrichtigungsleiste angezeigt wird. („Benutzer: Willkommen! Ich freue mich, diese Benachrichtigungsfunktion zu nutzen“)
  
  

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. Notification.requestPermission(function(permission){
2.  //Benachrichtigung hier unter Verwendung des Konstruktors anzeigen  
3. });

Erstellen Sie eine Schaltfläche mit HTML

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Schaltfläche id="Schaltfläche" >Lesen Sie Ihre BenachrichtigungSchaltfläche>

CSS nicht vergessen

CSS-CodeInhalt in die Zwischenablage kopieren

1. #button{   
2.   font-size:1.1rem;   
3.   Breite:200px;   
4.   Höhe:60px;   
5.   Rahmen:2px durchgezogen #df7813;   
6.   Rahmen-Radius:20px/50px;   
7.   Hintergrund:#fff;   
8.   Farbe:#df7813;   
9. }   
10. #button:hover{   
11.   Hintergrund:#df7813;   
12.   Farbe:#fff;   
13.   Übergang: 0,4 Sekunden Leichtigkeit;   
14. }   
15.   

全部的Javascript代码如下:
 

JavaScript-Code复制内容到剪贴板

1. document.addEventListener('DOMContentLoaded',function(){   
2.         document.getElementById('button').addEventListener('click',Funktion(){   
3.             if(! ('Benachrichtigung' in Fenster) ){   
4.                 alert('Tut mir leid, Bruder, Ihr Browser ist nicht gut genug, um Benachrichtigungen anzuzeigen');   
5.                 zurück;   
6.             }       
7.             Notification.requestPermission(function(permission){   
8.                 var config = {   
9.                              body:'Vielen Dank, dass Sie auf diese Schaltfläche geklickt haben. Ich hoffe, es hat Ihnen gefallen.',   
10.                              Symbol:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png' ,   
11.                              dir:'auto'  
12.                               };   
13.                 >,config);                });            });        });   
14.   
16. 从这段代码可以看出, 如果浏览器不支持Notification浏览器并不能很好地支持通知功能“ (Tut mir leid, Bruder, Ihr Browser ist nicht gut genug, um Benachrichtigungen anzuzeigen 为什么要让用户手动关闭通知栏？
对于这个问题，我们可以借助setTimeout函数设置一个时间间隔，使通知栏能定时关闭。
17.  

JavaScript-Code

复制内容到剪贴板

1. var config = {   
2.                body:'Heute haben zu viele Jungs ein Auge auf mich geworfen, du hast das Gleiche getan. Danke‘,   
3.                icon:'icon.png',   
4.                dir:'auto'  
5.              }   
6. var Benachrichtigung = neu Benachrichtigung("Hier bin ich!",config);   
7. setTimeout(function(){   
8.     notification.close(); //schließt die Benachrichtigung   
9. },5000);   
10.   

该说的东西就这些了.如果你意犹未尽，希望更加深入地了解Notification API，可以阅读以下的页面：

    MDN
    Paul Lunds Tutorial zur Benachrichtigungs-API

在CodePen-Demo

你可以在CodePen上看到由Prakash （@imprakash）编写的demo。