IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Découvrir l'API HTML5 Notification

Le , par Bovino

0PARTAGES

L'API Notification de HTML5 vous permet d'afficher à l'utilisateur des notifications (comme son nom l'indique ) à la manière des messages natifs du navigateur ou des extensions du navigateur.
Il s'agit d'une alternative élégantes aux abominables alert() ou aux fenêtres modales ( dont celles natives de HTML5 ).
Son utilisation est un peu particulière car elle requière une autorisation de l'utilisateur. On commence donc par vérifier que le navigateur implémente cette API, puis on demande l'autorisation :
Code javascript : Sélectionner tout
1
2
3
4
5
if('Notification' in window){ 
    Notification.requestPermission(function (status) { 
        // Reste du code de demande d'autorisation 
    } 
}
La méthode requestPermission() prend en paramètre une fonction de rappel à laquelle sera passé un argument dont la valeur correspond à l'autorisation accordée par l'utilisateur.
Trois valeurs sont possibles pour Notification.status :
granted, l'autorisation a été accordée ;
denied, l'autorisation a été refusée ;
default, l'utilisateur a fermé la fenêtre de demande sans préciser s'il acceptait ou non.
Seul la première valeur permet d'afficher les messages.
La différence entre les deux autres valeurs est que si l'utilisateur fait un choix (autorisation ou refus), l'appel à Notification.status ne demandera plus l'autorisation et gardera le choix déjà fait, tant qu'aucun choix n'a été fait (default), la demande s'affichera.

Une fois l'autorisation obtenue, il est possible d'afficher des messages à l'aide du constructeur new Notification().
Ce constructeur prend deux paramètres : le titre du message et un objet définissant certaines propriétés du message. Cet objet peut contenir diverses propriétés prédéfinies dont les plus utiles sont :
body, qui correspond au texte du message ;
icon, qui permet d'associer une icône au message.
Code javascript : Sélectionner tout
1
2
3
4
var msg = new Notification('Mon titre', { 
    body: 'Texte de mon message.', 
    icon: 'chemin/de/limage.gif' 
});
Et voilà, votre message s'affiche !

Plusieurs événements sont associés à la notification :
show, déclenché lorsque le message s'affiche ;
click, déclenché lors du clic sur le message ;
close, déclenché lorsque le message se ferme ;
error, déclenché si une erreur survient.

Voir un exemple d'utilisation en ligne.

Compatibilité.
Cette API est implémentée sur toutes les dernières versions des navigateurs (pour les versions plus anciennes, un préfixe peut être requis) sauf Internet Explorer qui ne l'a pas encore implémentée.

Une erreur dans cette actualité ? Signalez-le nous !