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.
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
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".](https://developer.chrome.com/static/docs/web-platform/notification-triggers/image/a-scheduled-notification-1bbf14c57c2da.png?authuser=5&hl=fr)
![Un événement de notification affiché a été consigné dans le volet "Notifications" des outils pour les développeurs Chrome.](https://developer.chrome.com/static/docs/web-platform/notification-triggers/image/a-displayed-notification-d54816e76c8f2.png?authuser=5&hl=fr)
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.](https://developer.chrome.com/static/docs/web-platform/notification-triggers/image/a-screenshot-the-notific-8bf4469e1c556.png?authuser=5&hl=fr)
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
- 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
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.