0Pricing
Frontend Academy · Leçon

Notifications push

Demandez l’autorisation, abonnez-vous aux notifications push avec l’API Push, recevez les messages dans le Service Worker et affichez les notifications avec showNotification.

Notifications push est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Pourquoi utiliser les notifications push ?

Les notifications push font revenir les utilisateurs lorsque l'application n'est pas ouverte : alertes de messages, actualités et rappels de paniers abandonnés. Elles sont gérées par l'agent de service et fonctionnent donc même lorsque la page est fermée.

API Push + API Notifications

Deux API de navigateur fonctionnent ensemble. La Push API reçoit les messages d'un serveur via un abonnement push. La Notifications API affiche le message à l'utilisateur.

Demander l'autorisation

Demandez à l'utilisateur la permission avant de l'abonner — faites-le uniquement en réponse à une action claire de sa part (clic sur un bouton), et non au chargement de la page.

async function enableNotifications() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    alert('Notifications denied');
    return;
  }
  // proceed to subscribe...
}

Abonnement push

Abonnez l'utilisateur via l'enregistrement actif de l'agent de service. La clé publique VAPID du serveur authentifie l'abonnement.

async function subscribeToPush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true, // required: every push must show a notification
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
  // Send sub to your server:
  await fetch('/api/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(sub)
  });
}

Clés VAPID

Les clés VAPID (identification volontaire du serveur d'application) identifient votre serveur auprès des services push (FCM, Mozilla, etc.). Générez-les une seule fois et stockez la clé privée sur votre serveur.

# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys

# Output:
# Public Key: BJ...
# Private Key: ka...

Notifications push côté serveur

Utilisez la bibliothèque npm web-push pour envoyer une notification push à un abonnement enregistré.

import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:you@example.com',
  process.env.VAPID_PUBLIC,
  process.env.VAPID_PRIVATE
);

await webpush.sendNotification(savedSubscription, JSON.stringify({
  title: 'New message',
  body: 'Alice sent you a message',
  url: '/inbox/123'
}));

Gérer les notifications push dans l'agent de service

Le SW reçoit l'événement push et affiche une notification.

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notification', {
      body: data.body,
      icon: '/icons/192.png',
      badge: '/icons/badge.png',
      data: { url: data.url }
    })
  );
});

Gestionnaire de clic sur une notification

Ouvrez l'application ou donnez-lui le focus lorsque l'utilisateur clique sur une notification.

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification.data.url || '/';
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(clientList => {
      for (const client of clientList) {
        if (client.url.endsWith(url) && 'focus' in client) return client.focus();
      }
      return clients.openWindow(url);
    })
  );
});

Options des notifications

Personnalisez l'icône, le badge (petite icône de la zone de notification), l'image (grande), les actions (boutons), la balise (pour remplacer les anciennes notifications portant la même balise), requireInteraction (reste affichée jusqu'à sa fermeture) et le mode silencieux.

self.registration.showNotification('Message', {
  body: 'Alice sent you a photo',
  icon: '/icons/192.png',
  image: '/images/alice-photo.jpg',
  actions: [
    { action: 'view', title: 'View' },
    { action: 'reply', title: 'Reply' }
  ],
  tag: 'message-from-alice', // replaces earlier 'message-from-alice'
  requireInteraction: false
});

Se désabonner

Permettez aux utilisateurs de se désabonner : appelez pushSubscription.unsubscribe() et supprimez l'abonnement de votre serveur.

async function disablePush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.getSubscription();
  if (sub) {
    await sub.unsubscribe();
    await fetch('/api/delete-subscription', {
      method: 'POST',
      body: JSON.stringify({ endpoint: sub.endpoint })
    });
  }
}

Prise en charge d'iOS

iOS 16.4 et versions ultérieures prennent en charge les notifications web, mais uniquement pour les AWP installées sur l'écran d'accueil. Les appareils antérieurs à iOS 16.4 et le navigateur Safari sur iPhone ne prennent pas du tout en charge les notifications web.

Bonnes pratiques

1) Demandez la permission uniquement après une action claire de l'utilisateur. 2) Envoyez des notifications utiles et peu fréquentes. 3) Affichez toujours une notification lors d'un événement push (les navigateurs peuvent révoquer la permission dans le cas contraire). 4) Proposez un désabonnement facile. 5) Testez les trois services push (FCM, Mozilla et WindowsPush).

Pièges courants

Les notifications push échouent silencieusement si : userVisibleOnly vaut false (Chrome exige true), les clés VAPID ne correspondent pas, l'abonnement a expiré (réabonnez l'utilisateur) ou aucune notification n'est affichée lors de l'événement push (le navigateur révoque alors la permission).

Vérification rapide

Pourquoi chaque message push doit-il produire une notification visible (avec userVisibleOnly: true) ?

Récapitulatif : notifications push

Demandez la permission uniquement à la suite d'une action de l'utilisateur. Abonnez l'utilisateur avec reg.pushManager.subscribe et la clé publique VAPID. Le serveur utilise la bibliothèque web-push pour envoyer les messages. L'événement push du SW appelle showNotification. Le clic sur une notification ouvre votre application ou lui redonne le focus. Personnalisez l'icône, le badge, l'image, les actions et la balise. Affichez toujours une notification (userVisibleOnly: true est obligatoire). iOS 16.4 et versions ultérieures prennent cette fonctionnalité en charge, uniquement pour les AWP installées.

Questions Fréquemment Posées

La leçon « Notifications push » est-elle gratuite ?

Oui — le texte complet de « Notifications push » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Notifications push » ?

Demandez l’autorisation, abonnez-vous aux notifications push avec l’API Push, recevez les messages dans le Service Worker et affichez les notifications avec showNotification. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Notifications push » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Le manifeste d’application web
  2. Enregistrement et cycle de vie d’un Service Worker
  3. Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst
  4. Notifications push
← Retour à Frontend Academy