API Notification Triggers

Les déclencheurs de notifications vous permettent de planifier des notifications locales qui ne nécessitent pas de connexion réseau. Elles sont donc idéales pour des cas d'utilisation tels que les applications d'agenda.

Thomas Steiner

Que sont les déclencheurs de notification ?

Les développeurs Web peuvent afficher des notifications à l'aide de l'API Web Notifications. Cette fonctionnalité est souvent utilisée avec l'API Push pour informer l'utilisateur d'informations urgentes, telles que des actualités ou des messages reçus. Les notifications s'affichent en exécutant JavaScript sur l'appareil de l'utilisateur.

Le problème avec l'API Push est qu'elle n'est pas fiable pour déclencher des notifications qui doivent s'afficher lorsqu'une condition particulière, comme l'heure ou l'emplacement, est remplie. Une notification d'agenda qui vous rappelle une réunion importante avec votre patron à 14h est un exemple de condition temporelle. Un exemple de condition basée sur la position est une notification qui vous rappelle d'acheter du lait lorsque vous vous approchez de votre supermarché. La connectivité réseau ou les fonctionnalités d'économie de la batterie telles que le mode Veille peuvent retarder la diffusion des notifications push.

Les déclencheurs de notification résolvent ce problème en vous permettant de planifier les notifications avec leur condition de déclenchement à l'avance, afin que le système d'exploitation envoie la notification au bon moment, même en l'absence de connectivité réseau ou en mode Économiseur de batterie.

Cas d'utilisation

Les applications d'agenda peuvent utiliser des déclencheurs de notification basés sur le temps pour rappeler à un utilisateur ses prochaines réunions. Le schéma de notification par défaut d'une application d'agenda peut consister à afficher une première notification prioritaire une heure avant une réunion, puis une autre notification plus urgente cinq minutes avant.

Une chaîne de télévision peut rappeler aux utilisateurs que leur émission télévisée préférée est sur le point de commencer ou que la diffusion d'une conférence en direct est sur le point de commencer.

Les sites de conversion de fuseaux horaires peuvent utiliser des déclencheurs de notification basés sur le temps pour permettre à leurs utilisateurs de programmer des alarmes pour des conférences téléphoniques ou des appels vidéo.

État actuel

Utiliser les déclencheurs de notification

Activation via about://flags

Pour tester l'API Notification Triggers en local, sans jeton d'essai d'origine, activez l'indicateur #enable-experimental-web-platform-features dans about://flags.

Détection de fonctionnalités

Pour savoir si le navigateur est compatible avec les déclencheurs de notifications, vérifiez l'existence de la propriété showTrigger :

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

Programmer une notification

Planifier une notification est semblable à l'affichage d'une notification push standard, à ceci près que vous devez transmettre une propriété de condition showTrigger avec un objet TimestampTrigger comme valeur à l'objet options de la notification.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

Annuler une notification planifiée

Pour annuler les notifications planifiées, demandez d'abord la liste de toutes les notifications correspondant à une balise spécifique via ServiceWorkerRegistration.getNotifications(). Notez que vous devez transmettre l'indicateur includeTriggered pour que les notifications planifiées soient incluses dans la liste :

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

Débogage

Vous pouvez utiliser le panneau "Notifications" des outils pour les développeurs Chrome pour déboguer les notifications. Pour démarrer le débogage, appuyez sur Start recording events (Démarrer l'enregistrement des événements)  ou sur Ctrl+E (Cmd+E sur Mac). Les outils de développement Chrome enregistrent tous les événements de notification, y compris les notifications planifiées, affichées et fermées, pendant trois jours, même lorsque les outils de développement sont fermés.

Démo

Vous pouvez voir les déclencheurs de notifications en action dans la démo, qui vous permet de planifier des notifications, de les lister et de les annuler. Le code source est disponible sur Glitch.

Sécurité et autorisations

L'équipe Chrome a conçu et mis en œuvre l'API Notification Triggers selon les principes fondamentaux définis dans la section Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web, y compris le contrôle utilisateur, la transparence et l'ergonomie. Étant donné que cette API nécessite des services workers, elle nécessite également un contexte sécurisé. L'utilisation de l'API nécessite la même autorisation que les notifications push standards.

Contrôle des utilisateurs

Cette API n'est disponible que dans le contexte d'un ServiceWorkerRegistration. Cela implique que toutes les données requises sont stockées dans le même contexte et sont automatiquement supprimées lorsque le service worker est supprimé ou que l'utilisateur supprime toutes les données du site pour l'origine. Le blocage des cookies empêche également l'installation de workers de service dans Chrome, et donc l'utilisation de cette API. L'utilisateur peut toujours désactiver les notifications pour le site dans les paramètres du site.

Transparence

Contrairement à l'API Push, cette API ne dépend pas du réseau, ce qui implique que les notifications planifiées ont besoin de toutes les données requises à l'avance, y compris les ressources d'image référencées par les attributs badge, icon et image. Cela signifie que l'affichage d'une notification planifiée n'est pas observable par le développeur et n'implique pas de réveiller le service worker tant que l'utilisateur n'a pas interagi avec la notification. Par conséquent, il n'existe actuellement aucun moyen connu pour le développeur d'obtenir des informations sur l'utilisateur à l'aide d'approches potentiellement non respectueuses de la confidentialité telles que la recherche de géolocalisation d'adresses IP. Cette conception permet également à la fonctionnalité d'exploiter éventuellement des mécanismes de planification fournis par le système d'exploitation, tels que AlarmManager d'Android, ce qui permet d'économiser la batterie.

Commentaires

L'équipe Chrome souhaite connaître votre expérience avec les déclencheurs de notifications.

Parlez-nous de la conception de l'API

L'API ne fonctionne-t-elle pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ? Signalez un problème de spécification dans le dépôt GitHub Notification Triggers ou ajoutez vos commentaires à un problème existant.

Problème d'implémentation ?

Avez-vous trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ? Envoyez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et définissez Components sur UI>Notifications. Glitch est idéal pour partager des reproductions de bugs rapides et faciles.

Vous prévoyez d'utiliser l'API ?

Vous souhaitez utiliser des déclencheurs de notification sur votre site ? Votre soutien public nous aide à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge. Envoyez un tweet à @ChromiumDev avec le hashtag #NotificationTriggers et indiquez-nous où et comment vous l'utilisez.

Liens utiles

• Explication publique
• Démonstration des déclencheurs de notification | Source de la démonstration des déclencheurs de notification
• Bug de suivi
• Enregistrement sur ChromeStatus.com
• Composant clignotant : UI>Notifications

Remerciements

Les déclencheurs de notifications ont été implémentés par Richard Knoll et la vidéo explicative a été écrite par Peter Beverloo, avec la contribution de Richard. Les personnes suivantes ont examiné l'article : Joe Medley, Pete LePage, ainsi que Richard et Peter. Image principale de Lukas Blazek sur Unsplash.