API Notification Triggers

Les déclencheurs de notification vous permettent de planifier des notifications locales qui ne nécessitent pas de connexion réseau, ce qui les rend idéales pour les 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 alertes info ou des messages reçus. Les notifications sont affichées en exécutant JavaScript sur l'appareil de l'utilisateur.

Le problème de 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, telle que l'heure ou le lieu, est remplie. Une notification d'agenda qui vous rappelle une réunion importante avec votre patron à 14h est un exemple de condition temporelle. Une notification qui vous rappelle d'acheter du lait lorsque vous entrez dans les environs de votre épicerie est un exemple de condition basée sur la localisation. La connectivité réseau ou des fonctionnalités d'économie de batterie telles que le mode Sommeil 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 l'heure pour rappeler à un utilisateur les réunions à venir. 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 fuseau horaire peuvent utiliser des déclencheurs de notification basée 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

Step État
1. Créer une vidéo explicative Fin
2. Créer l'ébauche initiale de la spécification Non démarré
3. Recueillez des commentaires et itérez vos conceptions. In progress
4. Phase d'évaluation Terminé
5. lancement Non démarré

Utiliser les déclencheurs de notification

Activer via about://flags

Pour tester l'API Notification Triggers localement, sans jeton d'évaluation de l'origine, activez l'option #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 */
}

Programmer une notification

La programmation d'une notification est semblable à l'affichage d'une notification push standard, 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),
  });
};

Annulation d'une notification programmé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'option 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éboguer des modèles

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

Un événement de notification programmé a été enregistré dans le volet "Notifications" des outils pour les développeurs Chrome, situé dans le panneau "Application".
Notification programmée.
Un événement de notification affiché a été consigné dans le volet "Notifications" des outils pour les développeurs Chrome.
Notification affichée.

Démonstration

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

Capture d'écran de l'application Web de démonstration des déclencheurs de notification.
Démonstration des déclencheurs de notification

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. Comme cette API nécessite des service workers, elle requiert é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 les service workers d'être installés dans Chrome, et donc d'utiliser cette API. L'utilisateur peut toujours désactiver les notifications pour le site dans les paramètres.

Transparence

Contrairement à l'API Push, cette API ne dépend pas du réseau, ce qui implique que les notifications planifiées nécessitent au préalable toutes les données requises, 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 programmée n'est pas observable par le développeur et n'implique pas de réactiver 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'utiliser é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 aimerait connaître votre avis sur les déclencheurs de notification.

Présentez-nous la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou s'il manque 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 de spécification dans le dépôt GitHub Notification Triggers ou ajoutez vos commentaires à un problème existant.

Vous rencontrez un problème lors de l'implémentation ?

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente des spécifications ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible et à fournir des instructions simples pour reproduire le bug, et définissez les composants sur UI>Notifications. Glitch fonctionne très bien pour partager des reproductions de bugs rapides et faciles.

Vous prévoyez d'utiliser l'API ?

Vous prévoyez d'utiliser les déclencheurs de notification sur votre site ? Votre assistance publique 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

Remerciements

Les déclencheurs de notification ont été mis en œuvre par Richard Knoll et la vidéo explicative écrite par Peter Beverloo, avec le soutien 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.