Consécutivement à l’article sur les notifications HTML 5, voici un article qui donne un exemple de fonctionnement des notifications.
La démo
Avant de pouvoir afficher une notification, vous devez autoriser le site à vous en présenter :
Il y a parfois des limitations qui empêchent le site de lancer une autorisation au chargement de la page : vous êtes parfois obligé de faire cliquer l’utilisateur sur un bouton pour voir apparaître l’avertissement d’autorisation.
Ensuite, vous pouvez afficher des notifications (avec ou sans bouton) :
Programmer une notification dans 3 secondes
Sources de l’exemple
Code HTML :
Code javascript :
-
<script type="text/javascript">
-
/** Demande la permission d’afficher des notifications */
-
function allowNotification()
-
{
-
if("webkitNotifications" in window)
-
{
-
// Demande la permission. En cas de succès, afficher la notification
-
webkitNotifications.requestPermission(p297_showNotification);
-
}
-
}
-
-
/** Affiche la notification */
-
function showNotification()
-
{
-
if("webkitNotifications" in window)
-
{
-
// Crée une notification à partir d’une image, d’un titre
-
// et d’une description (pas d’HTML possible).
-
// Pour créer une notification avec de l’HTML
-
// (pour le formatage), utiliser createHTMLNotification()
-
var notification = webkitNotifications.createNotification(
-
"http://www.google.fr/favicon.ico",
-
"Titre : cyril.me",
-
"Ceci est une notification"
-
);
-
// Afficher la notification
-
notification.show();
-
// N’afficher la notification que 5 secondes
-
window.setTimeout(function() {notification.cancel();}, 5000);
-
}
-
}
-
</script>
: