API Notifications HTML5

Les notifications bureau donnent à votre application web un moyen de communiquer avec l'utilisateur même quand il ne regarde pas l'onglet. Un message reçu, une tâche terminée, une alerte — autant de cas où afficher une notification système est plus efficace qu'attendre que l'utilisateur revienne sur la page.

L'API Notifications fonctionne en deux temps : d'abord demander la permission à l'utilisateur, ensuite envoyer la notification. Sans permission explicite, aucune notification ne peut s'afficher. Le navigateur mémorise ce choix pour les visites suivantes.

Vérifier et demander la permission

La propriété Notification.permission indique l'état actuel : default (jamais demandé), granted (accordé) ou denied (refusé). On ne demande la permission que si elle n'a pas encore été tranchée :

Exemple :   📋 Copier le code

// Vérifier l'état actuel de la permission
console.log(Notification.permission);
// "default" | "granted" | "denied"

// Demander la permission si elle n'a pas encore été donnée
async function demanderPermission() {
  if (Notification.permission === 'default') {
    const permission = await Notification.requestPermission();
    console.log('Permission :', permission);
  }
}

demanderPermission();

Envoyer une notification simple

Une fois la permission accordée, créer une notification est aussi simple qu'instancier un objet Notification avec un titre :

Exemple :   📋 Copier le code

// Envoyer une notification si la permission est accordée
function envoyerNotification(titre, message) {
  if (Notification.permission !== 'granted') return;

  new Notification(titre, {
    body: message,
    icon: '/images/logo.png'
  });
}

envoyerNotification('Nouveau message', 'Alice vous a envoyé un message.');

Options disponibles

Le deuxième argument du constructeur Notification accepte plusieurs options pour personnaliser l'apparence et le comportement :

Exemple :   📋 Copier le code

new Notification('Commande expédiée', {
  body: 'Votre commande #1042 est en route.',
  icon: '/images/colis.png',      // icône affichée dans la notification
  image: '/images/colis-img.jpg', // grande image (support variable)
  badge: '/images/badge.png',     // petite icône sur mobile
  tag: 'commande-1042',           // remplace une notification existante avec le même tag
  silent: false,                  // true pour désactiver le son
  requireInteraction: true        // reste visible jusqu'à ce que l'utilisateur agisse
});

Réagir aux interactions utilisateur

L'objet Notification émet des événements quand l'utilisateur interagit avec elle — clic, fermeture ou erreur d'affichage :

Exemple :   📋 Copier le code

const notif = new Notification('Rappel de réunion', {
  body: 'Réunion dans 5 minutes.',
  icon: '/images/calendrier.png',
  tag: 'reunion-14h'
});

// L'utilisateur clique sur la notification
notif.onclick = () => {
  window.focus(); // ramener l'onglet au premier plan
  window.location.href = '/agenda';
  notif.close();
};

// La notification est fermée (manuellement ou automatiquement)
notif.onclose = () => {
  console.log('Notification fermée.');
};

// Erreur d'affichage
notif.onerror = () => {
  console.error('Impossible d\'afficher la notification.');
};

Fermer une notification automatiquement

Par défaut, les notifications restent visibles jusqu'à ce que l'utilisateur les ferme. On peut les refermer automatiquement après quelques secondes avec setTimeout :

Exemple :   📋 Copier le code

const notif = new Notification('Sauvegarde réussie', {
  body: 'Vos données ont été enregistrées.',
  icon: '/images/ok.png'
});

// Fermer automatiquement après 5 secondes
setTimeout(() => notif.close(), 5000);

Exemple pratique : notifier quand un message arrive

Voici un cas d'usage complet — une application de messagerie qui affiche une notification quand un nouveau message arrive pendant que l'onglet est en arrière-plan :

Exemple :   📋 Copier le code

// Initialisation : demander la permission au chargement
window.addEventListener('load', () => {
  if (Notification.permission === 'default') {
    Notification.requestPermission();
  }
});

// Afficher une notification quand un message arrive
function notifierNouveauMessage(expediteur, extrait) {
  // Ne notifier que si l'onglet est en arrière-plan
  if (document.visibilityState === 'visible') return;
  if (Notification.permission !== 'granted') return;

  const notif = new Notification(`Message de ${expediteur}`, {
    body: extrait,
    icon: '/images/avatar-default.png',
    tag: `message-${expediteur}`,
    requireInteraction: false
  });

  notif.onclick = () => {
    window.focus();
    ouvrirConversation(expediteur);
    notif.close();
  };

  setTimeout(() => notif.close(), 8000);
}

// Simuler la réception d'un message
notifierNouveauMessage('Karim', 'Tu as vu le dernier commit ?');

Compatibilité et bonnes pratiques

Quelques règles à respecter pour une expérience utilisateur correcte :

• Ne jamais demander la permission au chargement de page sans contexte. Les navigateurs bloquent désormais les demandes automatiques jugées abusives. Attendez une action utilisateur (clic sur un bouton "Activer les notifications").
• Gérer le cas denied : si l'utilisateur a refusé, ne redemandez pas — expliquez-lui comment réactiver les notifications dans les paramètres du navigateur.
• Utiliser tag pour éviter d'empiler des notifications identiques : une nouvelle notification avec le même tag remplace la précédente.
• Les notifications nécessitent HTTPS en production. Elles fonctionnent aussi sur localhost pour le développement.

Par carabde | Mis à jour le 17 avril 2026