suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5 implementiert die Desktop-Benachrichtigungsfunktion der Benachrichtigungs-API. _HTML5-Tutorial-Fähigkeiten

HTML5 implementiert die Desktop-Benachrichtigungsfunktion der Benachrichtigungs-API. _HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:451941Durchsuche
Warum brauchen wir HTML5-Desktop-Benachrichtigungen?
Herkömmliche Desktop-Benachrichtigungen können als Div geschrieben und in der unteren rechten Ecke der Seite platziert werden, damit sie automatisch angezeigt werden und Nachrichten weiterleiten Umfragen und andere Methoden. Ein Nachteil dieser Methode besteht darin, dass ich beim Einkaufen über JD.com nicht weiß, ob mir Neuigkeiten von Renren übermittelt wurden, sondern ich warten muss, bis ich die aktuelle Seite auf Renren umschalte, um zu erfahren, dass es Neuigkeiten gibt . Diese Methode des Nachrichten-Push basiert auf dem Seitenüberleben, aber wir brauchen eine solche Strategie: Egal welche Seite Sie ansehen, solange eine Nachricht vorhanden ist, sollte sie an mich gesendet werden. Dies ist das Problem, das webkitNotification lösen möchte lösen. Die von Notification generierte Nachricht wird nicht an eine bestimmte Seite angehängt, sondern nur an den Browser.
Der normale Prozess zum Generieren einer Desktop-Benachrichtigung
Sehen wir uns zunächst an, wie eine Desktop-Benachrichtigung generiert wird:
1. Überprüfen Sie, ob der Browser Benachrichtigungen unterstützt
2. Überprüfen Sie die Benachrichtigungsberechtigungen des Browsers (ob Benachrichtigungen zulässig sind)
3. Wenn die Berechtigungen nicht ausreichen, holen Sie sich die Benachrichtigungsberechtigungen des Browsers
5 >HINWEIS: Zum ersten Punkt bedarf es einiger Erklärungen. Die Benachrichtigung wurde noch nicht standardisiert und unterstützt derzeit nur chrome19 und safari6. Es gibt Informationen im Internet, dass Firefox26 dies auch unterstützt, aber die Ergebnisse meines Firefox27-Tests sind dies es kann nicht unterstützt werden.
Ich glaube, jeder kennt Desktop-Benachrichtigungen von HTML5. Zu den gängigen Anwendungen gehört die Webversion von WeChat, für deren Nutzung die Einrichtung der Desktop-Benachrichtigungsfunktion erforderlich ist.
Es ist nicht schwierig, eine solche Funktion mit einem Client-Programm zu implementieren. Für die herkömmliche Webversion von Desktop-Benachrichtigungen können Sie ein Div schreiben und es in der unteren rechten Ecke der Seite platzieren, damit es automatisch angezeigt wird, und Nachrichten über Umfragen und andere Methoden abrufen und an den Benutzer weiterleiten. Ein Nachteil dieser Methode besteht darin, dass ich beim Einkaufen mit Taobao nicht weiß, ob auf Weibo Nachrichten an mich gesendet werden. Ich muss jedoch warten, bis ich die aktuelle Seite auf Sina Weibo umschalte, um zu erfahren, dass Nachrichten gesendet werden für mich. Diese Methode des Nachrichten-Push basiert auf dem Seitenüberleben, aber wir brauchen eine solche Strategie: Egal welche Seite Sie ansehen, solange eine Nachricht vorhanden ist, sollte sie an mich gesendet werden. Dies ist das Problem, das webkitNotification lösen möchte lösen.
Benachrichtigungen sind noch nicht standardisiert, sodass Sie sie nicht auf Websites wie w3cschool erlernen können. Allerdings unterstützen die meisten aktuellen Mainstream-Browser Benachrichtigungen. Die Desktop-Benachrichtigungsdarstellung von HTML5 sieht wie folgt aus:


Der Code lautet wie folgt:



XML/HTML-Code
Inhalt in die Zwischenablage kopieren
  1. > 
  2. <html> 
  3. <Kopf> 
  4. <meta charset="utf- 8"> 
  5. <Titel>HTML5-Desktop-Benachrichtigung Titel> 
  6. Kopf> 
  7. <Körper> 
  8. <Eingabe Typ="Schaltfläche" Wert="Desktop-Benachrichtigungen aktivieren" onclick ="showNotice();"> 
  9. <Skript> 
  10. Funktion showNotice(){
  11. Notification.requestPermission(function(status){  
  12. //Der Standardwert des Status „Standard“ entspricht einer Ablehnung. „Verweigert“ bedeutet, dass der Benutzer keine Benachrichtigungen möchte. „Gewährt“ bedeutet, dass der Benutzer der Aktivierung von Benachrichtigungen zustimmt
  13. if("granted" != Status)
  14. zurück;
  15. var notify = new Notification("Message",{
  16. dir:'auto',
  17. lang:'zh-CN',
  18. tag:'sds',//Die ID der instanziierten Benachrichtigung
  19. //icon unterstützt die Formate ico, png, jpg, jpeg
  20. icon:'http://www.xttblog.com/icons/favicon.ico',//Miniaturbild der Benachrichtigung
  21. body:'html5-Desktop-Benachrichtigung' //Der spezifische Inhalt der Benachrichtigung
  22. });
  23. notify.onclick=Funktion(){ 
  24. //Wenn auf die Benachrichtigungsmeldung geklickt wird, wird das Benachrichtigungsfenster aktiviert
  25. window.focus();
  26. }
  27. });
  28. }
  29. Skript> 
  30. Körper> 
  31. html>

Bei dem obigen Inhalt handelt es sich um die vom Herausgeber geteilte HTML5-Implementierung der Benachrichtigungs-API-Desktop-Benachrichtigungsfunktion. Ich hoffe, dass sie für alle hilfreich ist!
Originaltext: http://www.xttblog.com/?p=249
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Struktur und Semantik von HTML5 (1): Vorwort_HTML5-Tutorial-FähigkeitenNächster Artikel：Struktur und Semantik von HTML5 (1): Vorwort_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen