Présentation des notifications sur le bureau
La fonction de notification sur le bureau permet au navigateur d'avertir les utilisateurs des messages même lorsqu'ils sont réduits. C'est la combinaison la plus naturelle avec WebIM. Cependant, le seul navigateur qui prend actuellement en charge la fonction de notification sur le bureau est Chrome 5+. Dans le processus d'utilisation réel, l'interférence de la fonction de notification sur l'utilisateur doit être minimisée et l'apparition de la fonction de notification doit être minimisée. Cela nécessite de résoudre les problèmes suivants :
1. Recevoir Assurez-vous qu'une seule notification apparaît lors de la réception de plusieurs messages ;
2. Lorsque l'utilisateur est sur la page où la messagerie instantanée apparaît (la page est en état Focus), aucune notification n'apparaîtra ;
3. Lorsque l'utilisateur utilise plusieurs onglets pour ouvrir plusieurs pages avec la messagerie instantanée, tant qu'une page est dans l'état Focus, aucune notification n'apparaîtra ;
4. Comment Permettre aux utilisateurs de cliquer sur la couche flottante de notification pour localiser la fenêtre de discussion spécifique
5. 🎜>
window.webkitNotifications
<!DOCTYPE HTML> <html> <head <meta charset="gbk"> <title>Creating OS notifications in HTML5</title> </head> <body> <input type="button" value="验证授权" onclick="init();" /> <input type="button" value="弹出消息" onclick="notify();" /> <script type="text/javascript"> const miao = 5; function init() { if (window.webkitNotifications) { window.webkitNotifications.requestPermission(); } } function notify() { var icon = "logo.png"; var title = "Hello World"; var body = "You Are My World (5秒后自动关闭)"; if (window.webkitNotifications) { if (window.webkitNotifications.checkPermission() == 0) { var popup = window.webkitNotifications.createNotification(icon, title, body); popup.ondisplay = function(event) { setTimeout(function() { event.currentTarget.cancel(); }, miao * 1000); } popup.show(); popup.show(); } else { window.webkitNotifications.requestPermission(); return; } } } </script> </body> </html>
De nombreux didacticiels vidéo html5 en ligne peuvent être. regardé gratuitement !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!