Pourquoi avons-nous besoin de notifications de bureau HTML5Les 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/HTML
Copier le contenu dans le presse-papiers
- >
-
<html>
-
<tête>
-
<méta charset="utf- 8">
-
<titre>notification de bureau HTML5 titre>
-
tête>
-
<corps>
-
<entrée type="bouton" value="Activer les notifications sur le bureau" onclick ="showNotice();">
-
<script>
- fonction showNotice(){
- Notification.requestPermission(function(status){
- //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
- if("accordé" != statut)
- retour
-
var notifier = nouveau Notification("Message",{
- rép:'auto',
- lang:'zh-CN',
- tag:'sds',//L'identifiant de la notification instanciée
- //l'icône prend en charge les formats ico, png, jpg, jpeg
- icône : 'http://www.xttblog.com/icons/favicon.ico',//Image miniature de la notification
- body:'html5 desktop notification' //Le contenu spécifique de la notification
- });
-
notify.onclick=fonction(){
- //Si vous cliquez sur le message de notification, la fenêtre de notification sera activée
- window.focus();
- }
- });
- }
-
script>
-
corps>
-
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