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 des API Web Notifications : Cette fonctionnalité est souvent utilisée API Push pour informer l'utilisateur d'informations urgentes, telles que comme les alertes info ou les messages reçus. Les notifications sont affichées en exécutant JavaScript sur le 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 lorsqu'une condition particulière, comme l'heure ou le lieu, est remplie. Par exemple, basée sur le temps condition est une notification d'agenda qui vous rappelle une réunion importante avec votre patron à 14:00 Une notification qui vous rappelle d'acheter du lait est un exemple de condition basée sur le lieu. lorsque vous entrez dans les environs de votre épicerie. Connectivité réseau ou économie de batterie des fonctionnalités comme le mode Sommeil peuvent retarder l’envoi des notifications push.

Les déclencheurs de notification résolvent ce problème en vous permettant de programmer les notifications avec leurs déclencheurs à l'avance, afin que le système d'exploitation envoie la notification au bon moment même en l'absence de connexion réseau ou si l'appareil est 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 aux utilisateurs réunions. Le schéma de notification par défaut d'une application d'agenda peut consister à afficher un premier avertissement notification une heure avant une réunion, puis une autre notification plus urgente cinq minutes auparavant.

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

Les sites de conversion du fuseau horaire peuvent utiliser des déclencheurs de notification basés sur l'heure pour permettre à leurs utilisateurs les alarmes pour les conférences téléphoniques ou les appels vidéo.

État actuel

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 la 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 du paramètre 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, si ce n'est que vous devez transmettez une propriété de condition showTrigger avec un objet TimestampTrigger comme valeur à la 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 à un certain jusqu'à ServiceWorkerRegistration.getNotifications(). Notez que vous devez transmettre la méthode Indicateur includeTriggered pour inclure les notifications planifiées 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 appuyez sur Démarrer l'enregistrement des événements, ou Ctrl+E (Commande+E sous Mac). Enregistrements des outils pour les développeurs Chrome tous les événements de notification (y compris les notifications programmées, affichées et fermées) pendant trois jours ; même quand les outils de développement sont fermés.

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Démo

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

</ph>

Sécurité et autorisations

L'équipe Chrome a conçu et mis en œuvre l'API Notification Triggers selon les principes fondamentaux définies dans la section Contrôler l'accès à des fonctionnalités puissantes de plate-forme Web, y compris les règles le contrôle, 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 tous les données requises sont stockées dans le même contexte et sont automatiquement supprimées lorsque le service worker ou l'utilisateur supprime toutes les données du site pour l'origine. Le blocage des cookies empêche également les services les nœuds de calcul ne soient pas installés dans Chrome, et donc cette API d'être utilisée. Les notifications peuvent toujours désactivé par l'utilisateur 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 des notifications planifiées. ont besoin de toutes les données requises au préalable, y compris les ressources d'image référencées par badge, icon et image. Cela signifie que le développeur ne peut pas voir l'affichage d'une notification programmée 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 que le développeur obtienne des informations sur l'utilisateur. via des approches potentiellement respectueuses de la confidentialité comme la recherche de géolocalisation d'adresses IP. Cette conception également permet à la fonctionnalité d'exploiter éventuellement les mécanismes de planification fournis par le système d'exploitation comme 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 manque-t-il des méthodes ou les propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur la sécurité ? Signalez un problème de spécification dans le dépôt GitHub Notification Triggers ou faites part de 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, des instructions simples de reproduction et définissez "Components" sur UI>Notifications. Glitch fonctionne très bien de partager des reproductions de bugs rapidement et facilement.

Vous prévoyez d'utiliser l'API ?

Vous prévoyez d'utiliser les déclencheurs de notification sur votre site ? Votre soutien public nous aide à prioriser et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge. Envoyer un tweet à @ChromiumDev en utilisant le hashtag #NotificationTriggers et n'hésitez pas à nous dire où et comment vous l'utilisez.

Liens utiles

• Explication publique
• Démo des déclencheurs de notification | Source de démonstration des déclencheurs de notification
• Bug de suivi
• Entrée ChromeStatus.com
• Composant Blink: UI>Notifications

Remerciements

Les déclencheurs de notification ont été implémentés par Richard Knoll et celle écrite par Peter Beverloo, les contributions de Richard. Les personnes suivantes ont examiné l'article: Joe Medley, Pete LePage et Richard et Peter. Image héros de Lukas Blazek sur Unsplash.