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 des cas d'utilisation tels que les applications d'agenda.
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 les alertes info ou les 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 s'afficher lorsqu'une condition particulière, comme l'heure ou le lieu, est remplie. Une notification de calendrier qui vous rappelle une réunion importante avec votre responsable à 14h00 est un exemple de condition temporelle. Une notification qui vous rappelle d'acheter du lait lorsque vous entrez à proximité de votre épicerie est un exemple de condition basée sur l'emplacement. La connectivité réseau ou les fonctionnalités d'économie de la 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 programmer des 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 connexion 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 des 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 TV peut rappeler aux utilisateurs que leur émission télévisée préférée est sur le point de commencer ou qu'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és sur l'heure pour permettre aux 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 une ébauche initiale de spécification | Non démarrée |
| 3. Recueillir des commentaires et itérer la conception | In progress |
| 4. Phase d'évaluation | Terminé |
| 5. Lancement | Non démarrée |
Utiliser les déclencheurs de notification
Activer via about://flags
Pour tester l'API Notification Triggers localement, sans jeton d'évaluation, activez l'option #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 notification, vérifiez l'existence de la propriété showTrigger:
if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}
Planifier 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 de 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, commencez par demander 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ébogage
Vous pouvez utiliser le panneau des notifications des outils pour les développeurs Chrome pour déboguer les notifications. Pour commencer le débogage, appuyez sur Start recording events (Démarrer l'enregistrement des événements) 
ou Ctrl+E (Cmd+E sur Mac). Les outils pour les développeurs 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émonstration
Vous pouvez voir en action les déclencheurs de notification dans la démonstration, qui vous permet de programmer des notifications, de lister les notifications planifiées 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 en s'appuyant sur les principes fondamentaux définis dans Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web, tels que le contrôle utilisateur, la transparence et l'ergonomie. Étant donné que cette API nécessite des service workers, elle requiert également un contexte sécurisé. L'utilisation de l'API nécessite les mêmes autorisations que les notifications push standards.
Contrôle des utilisateurs
Cette API n'est disponible que dans le contexte d'une ServiceWorkerRegistration. Par conséquent, 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 lorsque 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 donc l'utilisation de cette API. Les notifications peuvent toujours être désactivées 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 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 qu'une notification planifié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 par le biais d'approches potentiellement protégeant la confidentialité, telles que la recherche de géolocalisation par adresse IP. Cette conception permet également à la fonctionnalité d'exploiter les mécanismes de planification fournis par le système d'exploitation, tels que AlarmManager d'Android, afin de préserver l'autonomie de la batterie.
Commentaires
L'équipe Chrome souhaite en savoir plus sur votre expérience avec les déclencheurs de notification.
Présentez-nous la conception de l'API
Y a-t-il quelque chose qui ne fonctionne pas comme prévu dans l'API ? Ou manque-t-il des méthodes ou des propriétés nécessaires à la mise en œuvre de 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 de déclencheurs de notifications ou donnez votre avis sur un problème existant.
Un problème d'implémentation ?
Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou la mise en œuvre est-elle différente des spécifications ?
Signalez un bug à l'adresse new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug, puis définissez les composants sur UI>Notifications. Glitch est idéal 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 à montrer aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge. Envoyez un tweet à @ChromiumDev en utilisant 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
- Entrée ChromeStatus.com
- Composant Blink:
UI>Notifications
Remerciements
Notification Triggers a été implémentée par Richard Knoll et le document explicatif écrit par Peter Beverloo, avec la contribution de Richard. Les personnes suivantes ont lu l'article : Joe Medley, Pete LePage, ainsi que Richard et Peter. Image héros par Lukas Blazek sur Unsplash.