Les notifications push vous permettent de proposer une expérience semblable à une application à vos utilisateurs, en les informant des informations importantes et opportunes, comme les messages de chat entrants. La plate-forme de notification est relativement nouvelle dans les navigateurs. À mesure que les cas d'utilisation et les exigences se précisent, de nombreuses API de notification sont ajoutées. Chrome 50 (bêta en mars 2016) ne fait pas exception, avec pas moins de quatre nouvelles fonctionnalités qui donnent aux développeurs plus de contrôle sur les notifications. Vous pouvez:
- ajouter des icônes aux boutons de notification ;
- modifier le code temporel pour créer une expérience cohérente ;
- suivre les événements de fermeture des notifications pour aider à synchroniser les notifications et fournir des données analytiques ;
- gérer l'expérience de notification lorsque la notification actuelle est remplacée par une autre.
Chrome 50 a également ajouté des charges utiles pour les notifications push. Pour vous tenir informé de l'API Notifications telle qu'elle est implémentée dans Chrome, suivez la spécification et le outil de suivi des problèmes de spécification.
Créer des boutons d'action attrayants avec des icônes personnalisées
Dans un post récent sur les boutons d'action des notifications dans Chrome 49, j'ai mentionné que vous ne pouvez pas joindre d'images aux boutons de notification pour les rendre attrayants, mais que vous pouvez utiliser des caractères Unicode pour insérer des emoji, etc. Vous n'avez plus à vous en soucier: avec cette nouveauté, vous pouvez désormais spécifier une image sur le bouton d'action:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
L'apparence de l'icône d'action varie selon la plate-forme. Par exemple, sur Android, un filtre gris foncé est appliqué à l'icône sous Lollipop et versions ultérieures, et un filtre blanc avant Lollipop, tandis que sur ordinateur, elle est en couleur. (Remarque: nous discutons de l'avenir de cette fonctionnalité sur ordinateur.) Certaines plates-formes ne peuvent même pas afficher d'icônes d'action. Assurez-vous donc d'utiliser les icônes pour fournir un contexte à l'action et non comme seul indicateur de l'intent.
Enfin, comme les ressources doivent être téléchargées, il est recommandé de réduire les icônes autant que possible et de les pré-cacher dans votre événement d'installation. (Au moment de la rédaction de cet article, les récupérés des ressources de notification dans Chrome ne sont pas encore acheminés via le service worker.)
Événements de fermeture de notification
Une fonctionnalité fréquemment demandée pour les notifications est la possibilité de savoir quand l'utilisateur a ignoré une notification. Nous n'avions aucun moyen de le faire jusqu'à ce qu'un ensemble récent de modifications apportées à la spécification des notifications ajoute un événement "notificationclose".
En utilisant les événements "notificationclick" et "notificationclose", vous pouvez comprendre comment vos utilisateurs interagissent avec vos notifications. Laisse-t-il les demandes ouvertes pendant longtemps, puis les ignore-t-il ou les traite-t-il immédiatement ?
Un cas d'utilisation courant consiste à pouvoir synchroniser les notifications entre les appareils. Si l'utilisateur ignore une notification sur son ordinateur, la même notification sur son appareil mobile doit également être ignorée. Nous ne sommes pas encore en mesure de le faire de manière silencieuse (n'oubliez pas que chaque message push doit afficher une notification), mais en utilisant notificationclose, vous pouvez le gérer en suivant l'état de la notification pour l'utilisateur sur votre serveur et en le synchronisant avec les autres appareils lorsque l'utilisateur les utilise.
Pour utiliser l'événement "notificationclose", enregistrez-le dans votre service worker. Il ne se déclenchera que lorsque l'utilisateur aura activement ignoré une notification, par exemple s'il ignore une notification spécifique ou toutes les notifications de sa barre d'état (sur Android).
Si l'indicateur requireInteraction est défini sur "false" ou n'est pas défini, et si la notification n'est pas fermée manuellement par l'utilisateur, mais automatiquement par le système, l'événement notificationclose ne sera pas déclenché.
Une implémentation simple est présentée ci-dessous. Lorsque l'utilisateur ignore la notification, vous avez accès à l'objet de notification à partir duquel vous pouvez effectuer une logique personnalisée.
self.addEventListener('notificationclose', e => console.log(e.notification));
Vous pouvez tester cela dans le Générateur de notifications. Vous recevrez une alerte lorsque vous fermerez la notification.
Ne gênez pas vos utilisateurs lorsque vous remplacez une notification existante
Je suis sûr qu'Oncle Ben parlait du système de notification et non des pouvoirs de Peter Parker lorsqu'il a dit "Un grand pouvoir implique de grandes responsabilités". Le système de notification est un moyen efficace d'interagir avec les utilisateurs. Si vous abusez de leur confiance, ils désactiveront toutes les notifications et vous risquez de les perdre complètement.
Lorsque vous créez une notification, vous pouvez la configurer pour qu'elle émette une alerte sonore ou vibre pour attirer l'attention de l'utilisateur. Vous pouvez également remplacer une notification existante en réutilisant son attribut "tag" sur un nouvel objet de notification.
Avant Chrome 50, chaque fois que vous créiez une notification ou remplaciez une notification existante, un modèle de vibration était exécuté ou une alerte sonore était diffusée, ce qui pouvait être frustrant pour vos utilisateurs. Dans Chrome 50, vous pouvez désormais contrôler ce qui se passe lors de la nouvelle notification à l'aide d'un simple indicateur booléen appelé "renotify". Le nouveau comportement par défaut lorsque vous utilisez la même "balise" pour les notifications ultérieures est de ne pas envoyer de notification. En tant que développeur, vous devez activer la "nouvelle notification" à l'utilisateur en définissant l'indicateur sur "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Vous pouvez tester cela dans le Générateur de notifications.
Gérer le code temporel affiché à l'utilisateur
Sur Android, les notifications de Chrome affichent leur heure de création en haut à droite par défaut. Malheureusement, il se peut que ce ne soit pas l'heure à laquelle la notification a été générée par votre système. Par exemple, l'événement peut avoir été déclenché lorsque l'appareil était hors connexion, ou la notification peut s'afficher pour une réunion à venir. Depuis Chrome 50, Chrome a ajouté une nouvelle propriété code temporel qui permet aux développeurs de fournir l'heure à afficher dans la notification.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Le code temporel n'est actuellement visible que dans Chrome pour Android. Bien qu'il ne soit pas visible sur ordinateur, il affecte l'ordre des notifications à la fois sur mobile et sur ordinateur.