Début 2015, nous avons lancé les notifications et le message push dans Chrome pour Android et ordinateur. C'était un grand pas en avant sur le Web. Les utilisateurs pouvaient commencer à interagir plus intensément avec les expériences sur le Web, même lorsque le navigateur était fermé.
Bien que vous puissiez envoyer ces messages, la seule chose que vous pouviez faire avec eux était de cliquer dessus pour ouvrir une page ou de les ignorer complètement.
Si vous examinez les notifications fournies nativement aux applications sur des plates-formes mobiles telles qu'iOS et Android, elles permettent chacune au développeur de définir des actions contextuelles que l'utilisateur peut appeler et avec lesquelles il peut interagir. Dans Chrome 48, nous avons ajouté une fonctionnalité similaire aux notifications Web sur ordinateur et dans Chrome pour Android.
L'ajout à l'API est assez simple. Il vous suffit de créer un tableau d'actions et de l'ajouter à l'objet NotificationOptions lorsque vous appelez showNotification à partir d'un enregistrement ServiceWorker (directement dans le ServiceWorker ou sur une page via navigator.serviceWorker.ready).
Actuellement, Chrome n'accepte que deux actions par notification.
Certaines plates-formes peuvent en prendre en charge davantage, tandis que d'autres peuvent en prendre en charge moins ou pas du tout. Vous pouvez déterminer les fonctionnalités prises en charge par la plate-forme en vérifiant 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'}]
});
Une notification simple avec deux boutons est créée. Notez qu'il n'est pas possible d'ajouter directement des icônes à l'action (pour le moment), mais vous pouvez utiliser des emoji et le jeu de caractères Unicode étendu pour ajouter plus de 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 lui avez donné un look 😻, l'utilisateur peut interagir avec elle à un moment donné. Les interactions avec la notification (à partir de Chrome 48) passent actuellement par l'événement notificationclick enregistré dans votre service worker. Elles peuvent être un clic général sur la notification ou un appui spécifique sur l'un des boutons d'action. Remarque : À 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 avez ensuite le choix d'ouvrir une nouvelle page pour que l'utilisateur effectue une action ou d'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);
L'élément intéressant est que les actions n'ont pas besoin d'ouvrir une nouvelle fenêtre. Elles peuvent effectuer des interactions d'application générales sans créer d'interface utilisateur. Par exemple, un utilisateur peut "aimer" ou "supprimer" un post sur les réseaux sociaux. Cette action sera effectuée sur les données locales de l'utilisateur, puis synchronisée avec le cloud sans ouvrir d'UI (bien qu'il soit recommandé d'envoyer un message concernant la modification des données à toutes les fenêtres ouvertes afin que l'UI puisse être mise à jour). Pour une action qui nécessite une interaction de l'utilisateur, vous devez ouvrir une fenêtre pour que l'utilisateur puisse répondre.
Étant donné que les plates-formes ne prennent pas en charge le même nombre d'actions et, dans certains cas, ne peuvent pas du tout prendre en charge les boutons d'action de notification, vous devez toujours fournir une alternative appropriée à une tâche, c'est-à-dire ce que vous attendez de l'utilisateur s'il ne fait que cliquer sur la notification.
Pour voir ce fonctionnement en action dès aujourd'hui, consultez le Notification Test Harness de Peter Beverloo et lisez les spécifications des notifications ou suivez les mises à jour des spécifications.
.