Maison > interface Web > Tutoriel H5 > HTML5 implémente la fonction de notification de bureau de l'API de notification _Compétences du didacticiel HTML5

HTML5 implémente la fonction de notification de bureau de l'API de notification _Compétences du didacticiel HTML5

WBOY
Libérer: 2016-05-16 15:51:45
original
1965 Les gens l'ont consulté
Pourquoi avons-nous besoin de notifications de bureau HTML5
Les notifications de bureau traditionnelles peuvent être écrites sous forme de div et placées dans le coin inférieur droit de la page pour apparaître automatiquement et transmettre les messages sondages et autres méthodes. Un inconvénient de cette méthode est que lorsque j'utilise JD.com pour faire des achats, je ne sais pas si Renren m'a envoyé des nouvelles, mais je dois attendre de basculer la page actuelle sur Renren pour savoir qu'il y a des nouvelles. . Cette méthode de transmission de messages est basée sur la survie de la page, mais nous avons besoin d'une telle stratégie : quelle que soit la page que vous consultez, tant qu'il y a un message, il doit me être transmis. C'est le problème que souhaite résoudre webkitNotification. résoudre. Le message généré par Notification n'est pas joint à une certaine page, uniquement au navigateur.
Le processus normal de génération d'une notification sur le bureau
Voyons d'abord comment une notification sur le bureau est générée :
Vérifiez si le navigateur prend en charge la notification.
2. Vérifiez les autorisations de notification du navigateur (si les notifications sont autorisées)
3. Si les autorisations sont insuffisantes, obtenez les autorisations de notification du navigateur
4. Créez des notifications de message
5. >REMARQUE : Concernant le premier point, quelques explications sont nécessaires. La notification n'a pas encore été standardisée, elle ne prend donc actuellement en charge que chrome19 et safari6. Il existe des informations sur Internet selon lesquelles Firefox26 le prend également en charge, mais les résultats de mon test Firefox27 sont les mêmes. il ne peut pas être soutenu.
Je pense que tout le monde connaît les notifications HTML5 sur le bureau. Les applications courantes incluent la version Web de WeChat, qui nécessite la configuration de la fonction de notification sur le bureau avant de pouvoir être utilisée.
Il n'est pas difficile d'implémenter une telle fonction à l'aide d'un programme client. Pour la version Web traditionnelle des notifications de bureau, vous pouvez écrire un div et le placer dans le coin inférieur droit de la page pour apparaître automatiquement, obtenir des messages via des sondages et d'autres méthodes et les transmettre à l'utilisateur. Un inconvénient de cette méthode est que lorsque j'utilise Taobao pour faire des achats, je ne sais pas s'il y a des messages envoyés sur Weibo, mais je dois attendre de basculer la page actuelle sur Sina Weibo pour savoir qu'il y a des messages envoyés. pour moi. Cette méthode de transmission de messages est basée sur la survie de la page, mais nous avons besoin d'une telle stratégie : quelle que soit la page que vous consultez, tant qu'il y a un message, il doit me être transmis. C'est le problème que souhaite résoudre webkitNotification. résoudre.
La notification n'est pas encore standardisée, vous ne pouvez donc pas l'apprendre sur des sites Web tels que w3cschool. Cependant, la plupart des navigateurs grand public actuels prennent en charge la notification. Le rendu des notifications sur le bureau de html5 est le suivant :

Le code est le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. > 
  2. <html> 
  3. <tête> 
  4. <méta charset="utf- 8"> 
  5. <titre>notification de bureau HTML5 titre> 
  6. tête> 
  7. <corps> 
  8. <entrée type="bouton" value="Activer les notifications sur le bureau" onclick ="showNotice();"> 
  9. <script> 
  10. fonction showNotice(){
  11. Notification.requestPermission(function(status){  
  12. //La valeur par défaut du statut « par défaut » est équivalente au rejet « refusé » signifie que l'utilisateur ne veut pas de notifications « accordées » signifie que l'utilisateur accepte d'activer les notifications
  13. if("accordé" != statut)
  14. retour
  15. var notifier = nouveau Notification("Message",{
  16. rép:'auto',
  17. lang:'zh-CN',
  18. tag:'sds',//L'identifiant de la notification instanciée
  19. //l'icône prend en charge les formats ico, png, jpg, jpeg
  20. icône : 'http://www.xttblog.com/icons/favicon.ico',//Image miniature de la notification
  21. body:'html5 desktop notification' //Le contenu spécifique de la notification
  22. });
  23. notify.onclick=fonction(){ 
  24. //Si vous cliquez sur le message de notification, la fenêtre de notification sera activée
  25. window.focus();
  26. }
  27. });
  28. }
  29. script> 
  30. corps> 
  31. html>

Le contenu ci-dessus est l'implémentation HTML5 de la fonction de notification de bureau de l'API Notification partagée par l'éditeur. J'espère qu'il sera utile à tout le monde !
Texte original : http://www.xttblog.com/?p=249

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal