Notifications des usagers

En tant que développeur d'une application web ouverte, l'une de vos tâches principales est de faire un retour à l'utilisateur. Parmi les autres aspects du comportement visuel (UI), ceci implique de fournir une notification afin que l'utilisateur soit averti qu'un événement, lié à l'application, s'est produit.

Dans cet article, nous fournissons les recommandations pour gèrer les notifications, dans les cas les plus courants, et les outils pour implémenter cette fonctionnalité. Nous allons aussi inclure des réponses aux questions les plus fréquentes (FAQ) et des exemples réels dans le cas où vous auriez besoin de plus d'informations sur l'usage du gestionnaire d'événement et des API comme l'API Alarme, l'API Notification ou l'API Vibreur.

Déroulement de la notification à l'usager

Voici le déroulement classique de la gestion des notifications:

Detect when to notify users → Notify users

Si votre application doit envoyer une notification à ses utilisateurs, l'application doit d'abord détecter l'événement donné. Généralement vous implémenterez ceci via le gestionnaire d'événement ou avec les fonctions d'interrogations (pooling). En fonction de l'événement déclenché (entre autres), vous pouvez notifier l'utilisateur de différents moyens afin de lui  donner l'experience la plus adaptée à cet l'événement.

Recommandations

Les notifications fournissent des informations utiles qui varient selon les applications. Par exemple vous pouvez avertir l'utilisateur d'un nouveau message dans un application de messagerie instantanée, l'alerter de la date de fin dans un application de gestion des tâches ou l'informer d'un événement spécial dans un jeu. Voici les bonnes pratiques concernant la gestion des notifications.

Détectez quand notifier l'utilisateur

Tout d'abord l'application doit détectez quand notifier l'utilisateur. Vous pouvez implémentez ceci avec le gestionnaire d'événement ou les fonctions d'interrogation (pooling).

Gestionnaire d'événement

C'est comme une règle, les applications web répondent aux saisies et autres occurences à travers des événements, depuis que les plateformes web reposent sur JavaScript, un langage de programmation orienté événement. Vous pouvez liez des gestionnaires d'événements sur les objets JavaScript ou sur un noeud de l'arborescence du DOM, afin que votre application puisse détecter qu'un événement s'est produit et en notifier l'usager. Pour une meilleur compréhension de la liste des événements reportez vous à la réference des événements du MDN. Voici quelques exemples:

  • Le plus souvent vous allez lier les évenements de type onclick, onfocus ou onkeydown aux éléments du DOM comme une div ou un button. Ces événements devront suivre les actions de l'utilisateur, qui vont varier en fonction du type d'appareil sur lequel votre application fonctionnera.
  • Les événements suivants sont généralement attachés à l'objet JavaScript window:
    • onload et onresize
    • Window.ondeviceorientation et Window.ondevicelight (détectent respectivement la rotation de l'appareil et la luminosité ambiante)
    • BatteryManager.onlevelchange (informations sur le statut de la batterie)
  • Beaucoup d'API peuvent accèder au gestionnaire d'événement via les fonctions de rappel (callback) (généralement onerror et onsuccess).

Note: Nous recommandons d'utiliser les événements founis par la plateforme web, si ils sont disponibles et correctement supportés; sinon vous pouvez utiliser les célèbres outils comme Modernizr ou PhoneGap pour construire des applications compatibles pour le futur.

Répondre aux autres conditions dans votre application

Malheureusement la plateforme ne fourni pas toujours l'événement exact que vous voulez tester. Dans ce cas vous pouvez utiliser une combinaison d'événement, configurer une alarme via l'API Alarme, ou vérifier périodiquement qu'une condition est vrai avec window.setInterval ou window.requestAnimationFrame.

Avertir l'utilisateur

Quand un événement se produit, vous cherchez à fournir à l'utilisateur un contact approprié. En fonction de l'événement détecté (entre autre), votre application web peut avertir l'utilisateur avec du texte, une vibration ou un son (ou plusieurs choses à la fois);

Par manipulation du DOM

Ceci est le moyen le plus simple d'avertir l'utilisateur. Transmettez lui l'information à travers l'application en manipulant le DOM via les méthodes JavaScript comme setAttribute, append ou innerHTML sur des éléments du DOM.

Par une notification système

L'experience utilisateur est cruciale. Au besoin, vous devez avertir l'usager même quand l'application est éteinte ou fonctionne en arrière-plan.

Vous pouvez configurer et afficher des notifications systèmes avec l'objet JavaScript founi par l'API Notification (disponible aussi pour les web-worker, dans les navigateurs récents):

new Notification('Voici une notification');

La liste de tâche dans la section d'exemple fourni un exemple concret d'utilisation. Les différents systèmes d'exploitation affichent les notifications systèmes de différentes manières.

Par vibration

C'est une autre possibilité depuis que beaucoup des appareils mobiles possèdent un vibreur. L'API Vibreur permet aux applications web d'accèder à ce matériel via JavaScript:

window.navigator.vibrate(200);

Quand une application web execute ce code, l'appareil hôte vibre pendant 200 millisecondes (soit 0,2 secondes). Merci de consulter la documentation de l'API Vibreur pour implémenter les différents modèles d'usage du vibreur et ses fonctions avancées.

Vous devez permettre à l'utilisateur d'activer ou de désactiver cette alerte par vibration car beaucoup de gens la trouvent ennuyante. Vous pouvez faire ça dans la partie configuration de votre application.

Par un son

L'élement HTML <audio> vous permet d'avertir l'utilisateur avec un son. Vous pouvez trouver un guide concernant <audio> dans la partie Tutoriels.

Examples

Détecter quand notifier l'utilisateur
Nous sommes beaucoup à connaître les gestionnaires d'événements et comment les utiliser pour fournir un script en réponse à l'événements. Mais il y a beaucoup de travail d'étude concernant le moment où vous décidez que les conditions sont rassemblées en fonction de l'environnement de l'utilisateur. Cet article partage quelques reflexions sur le sujet.
Liste de tâches (partie 1/3) - Vérifier quand la date de fin limite d'une tâche est dépassée
Voici un exemple plus complexe qui montre la comparaison de la date courante avec une date de fin limite, stockée en base de données.
Liste de tâches (partie 2/3) -Avertir l'utilisateur avec une notification et l'API Vibreur
Une fois que vous avez detecté que l'événement s'est produit, vous devez répondre, ce qui signifie informer l'utilisateur. L'API de Notification et l'API Vibration fournissent un moyen d'avertissement immédiat, simple et s'appliquant à tout le système. Cet article explique comment utiliser ces deux API dans ce contexte.
Liste de tâches (partie 3/3) - Utiliser les alarmes pour avertir l'utilisateur
Dans l'article précédent nous avons affiché une notification avec un minuteur classique et une fonction de vérification complexe. Une solution plus simple est disponible; avec l'API Alarme, vous pouvez automatiquement configurer la date limite de la notification et vérifier si elle est dépassée. Vous verrez comment dans cet article.

Tutoriels

Réferences

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : JeffD, chrisdavidmills
 Dernière mise à jour par : JeffD,