Le guide complet de l'API Notifications JavaScript

Introduction à l'API Notifications

L'API Notifications permet à une application web d'afficher des messages au niveau du système en dehors de l'onglet du navigateur — ces petites fenêtres contextuelles que votre système d'exploitation affiche dans un coin de l'écran. Comme elles apparaissent même lorsque l'utilisateur a basculé vers un autre onglet ou une autre application, les notifications constituent un moyen direct de diffuser des informations urgentes : un nouveau message de tchat, un téléchargement terminé, un rappel de calendrier.

Cette page couvre le cycle de vie complet : vérifier la disponibilité de l'API, demander la permission à l'utilisateur, créer et personnaliser des notifications, réagir aux clics, et afficher des notifications depuis un service worker afin qu'elles continuent de fonctionner après la fermeture de la page. Elle se termine par les règles qui empêchent les notifications de devenir agaçantes.

Quelques points à garder à l'esprit avant la première ligne de code :

• Les notifications nécessitent une autorisation explicite de l'utilisateur. Vous ne pouvez pas en afficher tant que la permission n'est pas granted.
• Elles ne fonctionnent que dans un contexte sécurisé (https://, ou http://localhost en développement).
• L'apparence et le comportement d'une notification sont contrôlés par le système d'exploitation, et non par votre CSS. Vous fournissez le contenu ; c'est l'OS qui décide comment l'afficher.

Vérifier la prise en charge

Effectuez toujours une détection de fonctionnalité avant d'utiliser l'API, afin que le code se dégrade gracieusement dans les environnements qui ne la prennent pas en charge (anciens navigateurs, certaines webviews embarquées et le rendu côté serveur) :

if ('Notification' in window) {
  // The Notifications API is available
} else {
  console.log('This browser does not support notifications.');
}

Comprendre les permissions

L'état de la permission est stocké dans la propriété statique Notification.permission et peut prendre l'une des trois valeurs string suivantes :

• 'granted' — l'utilisateur a autorisé les notifications ; vous pouvez les afficher.
• 'denied' — l'utilisateur les a bloquées ; les tentatives d'affichage d'une notification sont ignorées silencieusement.
• 'default' — l'utilisateur n'a pas encore décidé, ce qui est traité comme 'denied' jusqu'à ce que vous le demandiez.

Demandez la permission avec Notification.requestPermission(). Cette méthode renvoie une promesse qui se résout avec la string de permission résultante :

Notification.requestPermission().then((permission) => {
  console.log('Permission:', permission); // 'granted', 'denied', or 'default'
});

Un pattern robuste vérifie d'abord l'état actuel et ne sollicite l'utilisateur que si la décision est encore 'default' :

async function ensurePermission() {
  if (Notification.permission === 'granted') {
    return true;
  }
  if (Notification.permission === 'denied') {
    return false; // can't re-prompt; the user must change it in browser settings
  }
  const permission = await Notification.requestPermission();
  return permission === 'granted';
}

La forme basée sur les promesses s'associe naturellement avec async/await et l'API Promise au sens large.

Créer et afficher des notifications

Une fois la permission granted, construisez une notification avec le constructeur Notification. Le premier argument est le titre (obligatoire) ; le second est un objet d'options facultatif.

if (Notification.permission === 'granted') {
  new Notification('Hello, world!', {
    body: 'Here is the body of the notification.',
    icon: '/icon-192.png'
  });
}

La notification s'affiche au moment où l'objet est créé — vous n'avez pas besoin d'appeler une méthode « afficher » séparée.

Options courantes

L'objet d'options accepte de nombreux champs. Les plus utiles :

new Notification('New message', {
  body: 'You have 1 unread message from Alex.',
  icon: '/icon-192.png',
  tag: 'chat-alex',          // replacing an earlier "Alex" notification
  data: { conversationId: 42 },
  requireInteraction: true
});

Éviter le spam de notifications avec tag

L'option tag est le moyen le plus simple d'éviter l'accumulation de doublons. Si trois messages arrivent de la même personne, réutiliser un seul tag permet à l'utilisateur de voir une notification unique et mise à jour plutôt que trois :

function notifyUnread(count) {
  new Notification('Inbox', {
    body: `You have ${count} unread messages.`,
    tag: 'inbox-count' // each call updates the same notification
  });
}

Événements de notification

Une instance Notification déclenche des événements que vous pouvez écouter. Le plus important est click, déclenché quand l'utilisateur active la notification :

const notification = new Notification('Interactive Notification', {
  body: 'Click me to do something',
  icon: '/icon-192.png'
});

notification.onclick = (event) => {
  event.preventDefault();    // stop the browser's default focus behavior
  window.open('https://example.com', '_blank');
  notification.close();      // remove the notification once handled
};

Les autres événements disponibles sont show (affiché), error (échec d'affichage) et close (fermé). Vous pouvez également attacher des gestionnaires avec addEventListener — consultez la gestion des événements dans le DOM pour le pattern général.

Fermer les notifications par programmation

Appelez close() pour fermer vous-même une notification — pratique pour effacer un avis « téléchargement en cours… » une fois le téléchargement terminé :

const note = new Notification('Downloading…', { tag: 'download' });

// later, when the work is done:
setTimeout(() => note.close(), 4000);

Notifications silencieuses

Définissez silent: true pour afficher une notification sans son ni vibration — approprié pour les mises à jour ambiantes de faible priorité :

new Notification('Silent Notification', {
  body: 'This is a silent notification.',
  silent: true
});

Notifications depuis un service worker

Le constructeur Notification simple ne fonctionne que tant qu'une page est ouverte. Pour envoyer des notifications lorsque votre site est en arrière-plan — ou en réponse à un message push du serveur — affichez-les depuis un service worker à l'aide de ServiceWorkerRegistration.showNotification() :

// In the page: ask the service worker to show a notification
navigator.serviceWorker.ready.then((registration) => {
  registration.showNotification('Background-capable notification', {
    body: 'This can be shown even after the tab is closed.',
    icon: '/icon-192.png',
    actions: [
      { action: 'open', title: 'Open' },
      { action: 'dismiss', title: 'Dismiss' }
    ]
  });
});

Les notifications des service workers prennent également en charge les boutons d'action (le tableau actions), que le constructeur simple ne supporte pas. Gérez les clics à l'intérieur du service worker lui-même :

// In the service worker (sw.js)
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  if (event.action === 'open') {
    event.waitUntil(clients.openWindow('/inbox'));
  }
});

Cette approche via le service worker est ce qui alimente les vraies notifications web push : un serveur envoie un message, l'API Push réveille le service worker, et le worker appelle showNotification().

Compatibilité des navigateurs et mises en garde

• Contexte sécurisé uniquement. Les notifications nécessitent HTTPS (ou localhost). Elles ne fonctionneront pas sur des pages http:// simples.
• La permission est persistante. Une fois qu'un utilisateur choisit 'denied', vous ne pouvez plus le solliciter depuis JavaScript — il doit le modifier dans les paramètres du site du navigateur. N'insistez pas.
• iOS Safari ne prenait historiquement pas en charge les notifications web ; la prise en charge n'est arrivée que pour les sites ajoutés à l'écran d'accueil en tant que PWA. Effectuez toujours une détection de fonctionnalité.
• L'apparence est contrôlée par l'OS. Ne comptez pas sur une taille, une position ou un style spécifique — concentrez-vous sur un contenu clair et concis.

Bonnes pratiques

Pour que les notifications restent une fonctionnalité appréciée plutôt que désactivée :

• Demandez en contexte, après un geste. Sollicitez la permission lorsque l'utilisateur vient d'effectuer une action qui rend les notifications clairement utiles (par exemple, activer des alertes), jamais au premier chargement.
• Respectez un refus. Si la permission est 'denied', arrêtez. Les relances répétées ne sont même pas techniquement possibles, et harceler l'utilisateur dans l'interface nuit à la confiance.
• Soyez pertinent et opportun. Envoyez uniquement des notifications que l'utilisateur voudrait vraiment recevoir à ce moment-là.
• Utilisez-les avec parcimonie. Groupez avec tag, regroupez par lots lorsque possible, et réservez les notifications à ce qui est vraiment important — les notifications excessives habituent les utilisateurs à les ignorer ou à vous bloquer.
• Rendez les clics significatifs. Un clic devrait emmener l'utilisateur directement vers le contenu pertinent, et non simplement vers votre page d'accueil.

Conclusion

L'API Notifications JavaScript permet aux applications web d'atteindre les utilisateurs avec des messages système opportuns — aussi bien lorsqu'une page est ouverte que, via un service worker, après sa fermeture. Le workflow est cohérent : détecter la fonctionnalité, demander la permission en réponse à un geste utilisateur, puis créer des notifications avec le constructeur Notification (ou showNotification() dans un worker) et répondre aux événements de clic. Combinez cela avec une utilisation disciplinée et parcimonieuse, et les notifications deviennent une fonctionnalité que les utilisateurs gardent activée plutôt que de se précipiter pour désactiver.

Entraînement