API Notification Triggers

Les déclencheurs de notifications vous permettent de planifier des notifications locales qui ne nécessitent pas de connexion réseau. Ils sont donc idéaux 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, comme des événements d'actualité ou des messages reçus. Les notifications sont affichées 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 être affichées lorsqu'une condition particulière, comme l'heure ou la position, est remplie. Une condition basée sur le temps peut être une notification d'agenda qui vous rappelle une réunion importante avec votre responsable à 14h. Une condition basée sur la position peut, par exemple, être une notification qui vous rappelle d'acheter du lait lorsque vous vous trouvez à proximité de votre supermarché. La connectivité réseau ou les fonctionnalités d'économie de batterie, comme le mode Veille, peuvent retarder l'envoi des notifications push.

Les déclencheurs de notifications résolvent ce problème en vous permettant de planifier les notifications avec leur condition de déclenchement à l'avance. Ainsi, le système d'exploitation enverra la notification au bon moment, même en l'absence de connectivité réseau ou si l'appareil est en mode Économie 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 les réunions à venir. Le schéma de notification par défaut d'une application d'agenda peut être d'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 série préférée va bientôt commencer ou qu'une conférence en direct va bientôt débuter.

Les sites de conversion de fuseaux horaires peuvent utiliser des déclencheurs de notification basés sur l'heure 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 notifications

Activer la fonctionnalité via about://flags

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

Détection de caractéristiques

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

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

Planifier une notification

La planification d'une notification est semblable à l'affichage d'une notification push régulière, sauf 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 programmée

Pour annuler les notifications planifiées, demandez d'abord la liste de toutes les notifications correspondant à un tag 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 commencer le débogage, appuyez sur Start recording events (Commencer à enregistrer les événements)  ou sur Ctrl+E (Cmd+E sur Mac). Les outils de développement Chrome enregistrent tous les événements de notification (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 avez pu voir les déclencheurs de notifications en action dans une démo, qui vous permettait de planifier des notifications, de lister les notifications planifiées et de les annuler.

Sécurité et autorisations

L'équipe Chrome a conçu et implémenté l'API Notification Triggers en utilisant les principes de base définis dans Controlling Access to Powerful Web Platform Features (Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web), y compris le contrôle par l'utilisateur, la transparence et l'ergonomie. Étant donné que cette API nécessite des service 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 des service workers dans Chrome et, par conséquent, 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'interagit pas avec la notification. Par conséquent, il n'existe actuellement aucun moyen connu pour que le développeur obtienne des informations sur l'utilisateur par le biais d'approches potentiellement intrusives pour la confidentialité, comme la recherche de géolocalisation d'adresse IP. Cette conception permet également à la fonctionnalité d'exploiter éventuellement les mécanismes de planification fournis par le système d'exploitation, comme AlarmManager d'Android, ce qui permet de préserver la batterie.

Commentaires

L'équipe Chrome aimerait connaître votre avis sur les déclencheurs de notifications.

Parlez-nous de la conception de l'API

Y a-t-il un élément de l'API qui ne fonctionne pas comme prévu ? Ou bien manquent-ils des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ? Signalez un problème lié aux spécifications dans le dépôt GitHub des déclencheurs de notifications ou ajoutez vos commentaires à un problème existant.

Vous rencontrez un 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 ? Signalez 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 les composants sur UI>Notifications.

Vous prévoyez d'utiliser l'API ?

Vous prévoyez d'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 pour nous indiquer où et comment vous l'utilisez.

Liens utiles

• Explication publique
• Bug de suivi
• Entrée ChromeStatus.com
• Composant Blink : UI>Notifications

Remerciements

Les déclencheurs de notifications ont été implémentés par Richard Knoll et l'explication a été rédigée par Peter Beverloo, avec des contributions de Richard. Les personnes suivantes ont examiné l'article : Joe Medley, Pete LePage, ainsi que Richard et Peter. Image héros de Lukas Blazek sur Unsplash.