Actions de notification dans Chrome 48

Début 2015, nous avons lancé les messages push et les notifications dans Chrome pour Android et ordinateur. Cela a été un grand pas en avant sur le Web. Les utilisateurs peuvent commencer à explorer davantage le Web même après la fermeture du navigateur.

Bien que vous puissiez envoyer ces messages, la seule chose que vous pouviez faire avec un était soit de cliquer dessus et d'ouvrir une page, soit de le fermer complètement.

Si vous examinez les notifications fournies en mode natif aux applications sur les plates-formes mobiles telles qu'iOS et Android, elles permettent chacune au développeur de définir des actions contextuelles avec lesquelles l'utilisateur peut appeler et interagir. Dans Chrome 48, nous avons ajouté une fonctionnalité similaire aux notifications Web sur ordinateur et dans Chrome pour Android.

Capture d'écran d'une notification

L'ajout à l'API est assez simple. Il vous suffit de créer un tableau d'actions et de les ajouter à l'objet NotificationOptions lorsque vous appelez showNotification à partir d'un enregistrement de ServiceWorker (soit directement dans ServiceWorker, soit sur une page via navigator.serviceWorker.ready).

Actuellement, Chrome ne propose que deux actions sur chaque notification. Certaines plates-formes peuvent accepter davantage, et certaines plates-formes peuvent en accepter moins, voire aucune. Vous pouvez déterminer ce que la plate-forme accepte en consultant Notification.maxActions. Dans les exemples suivants, nous supposons que la plate-forme prend en charge deux actions.

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

Vous créez ainsi une notification simple avec deux boutons. Notez qu'il n'est pas (encore) possible d'ajouter directement des icônes à l'action, mais vous pouvez utiliser des emoji et le jeu de caractères Unicode étendu pour ajouter du contexte à vos boutons de notification.

Exemple :

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

Maintenant que vous avez créé une notification et que vous l'avez faite apparaître 😻, l'utilisateur peut interagir avec elle à l'avenir. À partir de Chrome 48, les interactions avec la notification passent toutes par l'événement notificationclick enregistré dans votre service worker. Il peut s'agir d'un clic général sur la notification ou d'un appui spécifique sur l'un des boutons d'action. Notez qu'à l'avenir, vous pourrez également répondre à l'événementnotificationclose.

Pour comprendre l'action effectuée par l'utilisateur, vous devez inspecter la propriété action sur l'événement. Vous pouvez ensuite ouvrir une nouvelle page pour que l'utilisateur puisse effectuer une action ou effectuer la tâche en arrière-plan.

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

Fait intéressant, les actions ne doivent pas nécessairement ouvrir une nouvelle fenêtre. Elles peuvent effectuer des interactions générales avec les applications sans créer d'interface utilisateur. Par exemple, un utilisateur peut cliquer sur "J'aime" ou "Supprimer" pour une publication sur les réseaux sociaux afin d'effectuer cette action sur ses données locales, puis de la synchroniser avec le cloud sans ouvrir d'interface utilisateur (bien qu'il soit recommandé d'envoyer un message à toutes les fenêtres ouvertes afin de pouvoir mettre à jour l'interface utilisateur). Pour une action qui nécessite une interaction de l'utilisateur, vous devez ouvrir une fenêtre dans laquelle l'utilisateur peut répondre.

Étant donné que les plates-formes n'acceptent pas le même nombre d'actions ou qu'elles ne sont, dans certains cas, pas compatibles du tout avec les boutons d'action de notification, vous devez vous assurer de toujours fournir un remplacement judicieux à une tâche correspondant à ce que vous attendez de l'utilisateur s'il clique simplement sur la notification.

Si vous voulez voir cela en action aujourd'hui, consultez Peter Beverloo's Notification Test Harness et renseignez-vous sur les spécifications des notifications ou suivre les mises à jour des spécifications.

.