communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Exemples d'utilisation de la fonction de notification HTML5 (rappel sur le bureau)_compétences du didacticiel HTML5

Exemples d'utilisation de la fonction de notification HTML5 (rappel sur le bureau)_compétences du didacticiel HTML5

WBOY
Libérer： 2016-05-16 15:48:13
original
2255 Les gens l'ont consulté

1. Introduction à la notification HTML5
La notification HTML5 est une notification sur le bureau. À l’heure actuelle, les navigateurs fonctionnent toujours en mode sandbox strict, qui isole la communication entre le navigateur et le bureau. La notification peut s'étendre sur des bacs à sable, permettant au navigateur d'avertir les utilisateurs des messages même lorsqu'ils sont réduits.
2. API de rappel de bureau

Copiez le code
Le code est le suivant :
window.webkitNotifications

L'API dispose de 3 méthodes :

Copier le code
Le code est le suivant :
requestPermission demander une notification sur le bureau
checkPermission vérifier l'autorisation de notification sur le bureau (PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, PERMISSION_DENIED = 2)
createNotification créer une notification sur le bureau

3. Exemple de notification sur le bureau
Utilisons l'API de notification sur le bureau pour écrire une petite fonction : envoyez un message sur le bureau toutes les 20 minutes pour rappeler à l'utilisateur de faire une pause.
Le code est le suivant :

Copiez le code
Le code est le suivant :
if(window.webkitNotifications) {
if(window.webkitNotifications.checkPermission()==0){
setInterval(function(){
var popup = window.webkitNotifications.createNotification("avator.jpg ","Rappel chaleureux de Ruhua : ","Vos yeux deviendront aveugles si vous faites face à l'ordinateur pendant une longue période, reposez-vous ~");
popup.show();
},1000 * 60 * 20);≪/p>

}else{
window.webkitNotifications.requestPermission();
}
}else{
alert('Le navigateur ne prend pas en charge les notifications sur le bureau~!');
}

Ensuite, le bureau apparaîtra après 20 minutes :

Étiquettes associées：
html5 notification
source：php.cn
Article précédent：La solution pour faire d'Internet Explorer un navigateur prenant en charge HTML5 (en utilisant html5shiv)_html5 compétences du didacticiel Article suivant：Comment rendre les navigateurs inférieurs à IE9 compatibles avec les astuces du didacticiel HTML5_html5
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
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal