Améliorations apportées aux notifications Web dans Chrome 50 : icônes, fermeture des événements, reformulation des préférences et horodatages

Les notifications PPush vous permettent d'offrir à vos utilisateurs une expérience semblable à celle d'une application en les avertissant de mises à jour importantes et opportunes, comme des messages de chat entrants. La plate-forme de notification est relativement nouvelle dans les navigateurs. Comme de plus en plus de cas d'utilisation et d'exigences s'étoffent, nous constatons de nombreux ajouts aux API pour les notifications. 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 offrir une expérience cohérente,
  • suivre les événements de fermeture des notifications afin de les synchroniser et de fournir des données analytiques.
  • gérer l'expérience de notification lorsqu'une notification remplace la notification actuellement affichée.

Chrome 50 a également ajouté des charges utiles pour les notifications push. Pour vous tenir informé des nouveautés de l'API Notifications telle qu'elle est implémentée dans Chrome, suivez les spec et l'outil de suivi des problèmes liés aux spécifications.

Créez des boutons d'action attrayants avec des icônes personnalisées

Dans un article récent sur les boutons d'action de notification dans Chrome 49, j'ai indiqué que vous ne pouviez pas joindre d'images aux boutons de notification pour les rendre attrayants et accrocheurs, mais vous pouvez utiliser des caractères Unicode pour intégrer des emoji, etc. Ne vous inquiétez pas: grâce à cet ajout récent, 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'}]
});
Notification sur le bureau

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 dans Lollipop et versions ultérieures, ainsi qu'un filtre blanc antérieur à Lollipop. Sur ordinateur, elle est en couleur. (Remarque: Il existe une discussion sur l'avenir de cette fonctionnalité pour ordinateur.) Certaines plates-formes peuvent même ne pas pouvoir afficher d'icônes d'action. Assurez-vous donc de les utiliser pour fournir du 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 au maximum la taille des icônes et de les mettre en cache dans votre événement d'installation. (Au moment de la rédaction de cet article, les récupérations de ressources de notification dans Chrome ne sont pas encore acheminées via le service worker.)

Événements de fermeture de notification

Une fonctionnalité fréquemment demandée 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 de notification ajoute un événement notificationclose.

Les événements "notificationclick" et "notificationclose" vous permettent de comprendre comment vos utilisateurs interagissent avec vos notifications. Les laissent-elles ouvertes pendant longtemps, puis les rejettent-elles activement, ou agissent-elles immédiatement sur ces contenus ?

Un cas d'utilisation courant consiste à pouvoir synchroniser les notifications entre les appareils. Si l'utilisateur ignore une notification sur son appareil de bureau, la même notification sur son appareil mobile doit également être ignorée. Nous n'avons pas encore la possibilité d'effectuer cette opération en mode silencieux (n'oubliez pas que chaque message push doit avoir une notification affichée). Toutefois, utiliser "notificationclose" vous permet de gérer cela en vous permettant de suivre l'état de la notification de l'utilisateur sur votre serveur et de le synchroniser avec les autres appareils au fur et à mesure que 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 ignore activement 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 requiredInteraction est défini sur "false" ou n'est pas défini, si la notification n'est pas ignorée manuellement par l'utilisateur, mais automatiquement par le système, l'événement "notificationclose" ne sera pas déclenché.

Voici une implémentation simple. Lorsque l'utilisateur ignore la notification, vous avez accès à l'objet de notification à partir duquel vous pouvez exécuter une logique personnalisée.

self.addEventListener('notificationclose', e => console.log(e.notification));

Vous pouvez vérifier cela dans le Générateur de notifications. Vous recevez une alerte lorsque vous fermez la notification.

Ne gênez pas vos utilisateurs lorsque vous remplacez une notification existante.

Je suis à peu près sûre que Oncle Ben a parlé 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 support puissant pour interagir avec les utilisateurs. Si vous abusez de leur confiance, elles 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 crée une alerte sonore ou un vibreur pour attirer l'attention de l'utilisateur. En outre, vous pouvez remplacer une notification existante en réutilisant son attribut "tag" sur un nouvel objet de notification.

Avant la version 50 de Chrome, chaque fois que vous créiez une notification ou remplaçiez une notification existante, l'appareil émettait une vibration ou émettait une alerte sonore, ce qui pouvait agacer vos utilisateurs. Désormais, dans Chrome 50, vous contrôlez ce qui se passe lors de la notification de nouveau via un simple indicateur booléen appelé "renotify". Le nouveau comportement par défaut lors de l 'utilisation de la même balise pour les notifications suivantes est le mode silencieux et, en tant que développeur, vous devez choisir d'envoyer une nouvelle notification à l'utilisateur en définissant l'indicateur sur "true".

self.registration.showNotification('Oi!', {
  'renotify': true,
  'tag': 'tag-id-1'
});

Vous pouvez essayer dans le Générateur de notifications.

Gérer le code temporel présenté à l'utilisateur

Sur Android, les notifications de Chrome affichent par défaut les heures de création dans l'angle supérieur droit. Malheureusement, ce n'est peut-être pas le moment où 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 d'une réunion à venir peut s'afficher. Depuis Chrome 50, Chrome a ajouté une nouvelle propriété timestamp qui permet aux développeurs de fournir l'heure à afficher dans la notification.

self.registration.showNotification('Best day evar!', {
  'timestamp': 360370800000
});

Actuellement, le code temporel n'est visible que dans Chrome pour Android. Bien qu'il ne soit pas visible sur ordinateur, il affectera l'ordre des notifications sur mobile et sur ordinateur.