API de notifications et gestion des autorisations

Notification.permission est une chaîne statique qui reflète l’état actuel de l’autorisation. Elle peut valoir "granted" (l’utilisateur a autorisé), "denied" (l’utilisateur a bloqué) ou "default" (la demande n’a jamais été faite). Vérifiez cette propriété avant d’essayer d’afficher des notifications afin d’éviter les erreurs inutiles.

Notification.requestPermission() renvoie une promesse qui se résout avec la nouvelle chaîne d’autorisation. Appelez-la uniquement en réponse à une action explicite de l’utilisateur, et non au chargement de la page. Les navigateurs ignorent ou bloquent les demandes d’autorisation affichées immédiatement au chargement, et les utilisateurs les trouvent agaçantes lorsqu’elles apparaissent sans contexte.

La méthode la plus efficace consiste à afficher une invite dans l’application qui explique l’avantage, puis à laisser l’utilisateur cliquer sur « Activer les notifications » avant d’appeler requestPermission(). Cela fournit un contexte, augmente le taux d’acceptation et évite que le navigateur ne considère votre site comme indésirable. Ne demandez jamais l’autorisation au chargement de la page.

new Notification(title, options) crée et affiche une notification système. Le premier argument est la chaîne du titre. L’objet options est le deuxième argument et accepte des propriétés comme body (texte du sous-titre), icon (URL de l’image) et tag pour éviter les doublons. Cela ne fonctionne que si l’autorisation vaut "granted".

Les principales options de notification sont les suivantes : body pour le texte descriptif sous le titre, icon pour une petite image, badge pour la petite icône monochrome affichée dans la zone de notifications de l’OS, image pour une grande image intégrée, tag pour remplacer une notification précédente possédant le même identifiant et requireInteraction: true pour conserver la notification jusqu’à ce que l’utilisateur agisse.

L’instance Notification déclenche plusieurs événements : onclick se déclenche lorsque l’utilisateur clique sur la notification (utilisez-le pour mettre la fenêtre au premier plan et naviguer), onclose se déclenche lorsqu’elle est fermée et onerror se déclenche en cas de problème lors de sa création. Associez des gestionnaires à l’instance renvoyée après l’appel de new Notification().

Stockez l’instance Notification renvoyée dans une variable et appelez notification.close() pour la fermer par programmation. Cela est utile pour les notifications urgentes qui deviennent inutiles après un certain temps. Combinez cette méthode avec setTimeout pour fermer automatiquement la notification après quelques secondes.

L’API des notifications nécessite un contexte sécurisé. Sur les pages HTTP, typeof Notification === 'undefined' est renvoyé ou l’API est entièrement désactivée, selon le navigateur. Il s’agit d’une mesure de sécurité destinée à empêcher les sites malveillants d’inonder les utilisateurs de faux messages système. Vérifiez toujours la disponibilité avant de l’utiliser.

Un crochet useNotifications peut exposer deux méthodes : requestPermission() et showNotification(title, options). Il suit en interne l’état actuel de l’autorisation et le met à jour après la demande. Les composants appellent showNotification sans se préoccuper des vérifications d’autorisation, puisque le crochet les effectue en interne.

L’API de visibilité des pages expose document.hidden et l’événement visibilitychange. Les notifications sont surtout utiles lorsque l’utilisateur ne consulte pas déjà l’onglet. Vérifiez document.hidden === true avant d’afficher une notification afin d’éviter les alertes redondantes lorsque la page est déjà au premier plan.

L’API des notifications présentée ici sert aux notifications déclenchées localement depuis la page elle-même. Pour recevoir des notifications push même lorsque la page est fermée, vous avez besoin de l’API des notifications push combinée à un travailleur de service. Le travailleur de service reçoit l’événement push et appelle self.registration.showNotification() en arrière-plan.

Laquelle des valeurs suivantes est NOT valide pour Notification.permission ?

Notification.permission peut valoir granted, denied ou default. Demandez toujours l’autorisation après une action de l’utilisateur, et non au chargement de la page. Utilisez new Notification(title, options) pour créer des notifications et gérez onclick pour mettre la fenêtre au premier plan. Combinez cette API avec l’API de visibilité afin d’afficher des notifications uniquement lorsque l’onglet est masqué.