Aller au contenu principal

Guide de Test des Notifications Web Push

Ce guide explique comment tester les notifications web push dans l'application Aperture.

Prérequis​

  1. Générer les clés VAPID:

    npx web-push generate-vapid-keys

    Cela génère deux clés :

    • Public Key: À utiliser pour VAPID_PUBLIC_KEY
    • Private Key: À utiliser pour VAPID_PRIVATE_KEY

  2. Configurer les variables d'environnement:

    Ajoutez dans votre .env (backend) :

    VAPID_PUBLIC_KEY=votre-public-key
    VAPID_PRIVATE_KEY=votre-private-key
    VAPID_SUBJECT=mailto:contact@aaperture.com

  3. Vérifier que le service worker est enregistré:

    • Le service worker doit être actif dans le navigateur
    • Vérifiez dans DevTools → Application → Service Workers

Tests Frontend​

1. Vérifier le support des notifications push​

Ouvrez la console du navigateur et testez :

// Vérifier le support
if ("serviceWorker" in navigator && "PushManager" in window) {
  console.log("✅ Push notifications supported");
} else {
  console.log("❌ Push notifications not supported");
}

2. Tester l'abonnement via l'interface​

L'application invite automatiquement les utilisateurs à activer les notifications push :

  1. Ouvrir l'application dans le navigateur (Chrome, Firefox, Edge)
  2. Se connecter avec un compte utilisateur actif
  3. Attendre 3 secondes après la connexion
  4. Une invitation apparaît automatiquement (toast en bas de l'écran) :
    • Titre : "Activer les notifications push ?"
    • Description : "Recevez des notifications même lorsque l'application est fermée"
    • Bouton "Activer" : Cliquez pour s'abonner
    • Bouton "Plus tard" : Ignore l'invitation (ne réapparaîtra pas)
  5. Cliquer sur "Activer" :
    • Le navigateur demande la permission
    • Autoriser les notifications dans la popup du navigateur
    • Message de succès : "Push notifications enabled"
    • Vérifier que l'abonnement est créé en base de données

Note : L'invitation n'apparaît qu'une seule fois. Si vous l'avez ignorée, vous pouvez la réactiver en supprimant la clé push-notification-prompt-dismissed du localStorage dans DevTools.

3. Vérifier l'abonnement via l'API​

// Dans la console du navigateur (après connexion)
const response = await fetch("/api/push-notifications/subscriptions", {
  headers: {
    Authorization: `Bearer ${yourJwtToken}`,
  },
});
const subscriptions = await response.json();
console.log("Subscriptions:", subscriptions);

4. Tester la réception d'une notification​

Option 1 : Via l'interface utilisateur

  • Utiliser une fonctionnalité qui déclenche une notification (ex: création de session, action IA)
  • La notification devrait apparaître même si l'onglet est fermé

Option 2 : Via l'API directement

// Dans la console du navigateur
const response = await fetch("/api/push-notifications/public-key");
const { publicKey } = await response.json();
console.log("Public Key:", publicKey);

Tests Backend​

1. Vérifier que les clés VAPID sont chargées​

Au démarrage du backend, vous devriez voir :

✅ VAPID keys configured - push notifications enabled

Si vous voyez :

ℹ️ VAPID keys not configured (optional). Push notifications are disabled...

Les clés ne sont pas configurées et les notifications push sont désactivées.

2. Tester l'envoi d'une notification via le service​

Option 1 : Via une action IA (méthode recommandée)

  1. Ouvrez l'interface de chat avec l'IA
  2. Demandez à l'IA d'exécuter une action (ex: "Créer une session pour...")
  3. Une notification push devrait être envoyée automatiquement après l'exécution de l'action
  4. Vérifiez les logs backend pour voir : 
    ✅ Push notification sent → UserID: xxx | SubscriptionID: yyy

Option 2 : Script de test manuel

Créez un script de test temporaire :

// backend/test-push.ts (script temporaire)
import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module.js";
import { PushNotificationsService } from "./notifications/push-notifications.service.js";

async function testPush() {
  const app = await NestFactory.createApplicationContext(AppModule);
  const pushService = app.get(PushNotificationsService);

  // Remplacez par un userId valide (UUID)
  const userId = "votre-user-id-uuid";

  const result = await pushService.sendNotification(userId, {
    title: "Test Notification",
    body: "Ceci est un test de notification push",
    icon: "/assets/aaperture-logo.png",
    data: { url: "/sessions" },
  });

  console.log(
    `✅ Notifications envoyées: ${result.sent}, Échecs: ${result.failed}`
  );
  await app.close();
}

testPush();

Exécutez :

npx tsx backend/test-push.ts

3. Tester via les endpoints API​

Récupérer la clé publique :

curl -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  https://localhost:8080/api/push-notifications/public-key

Lister les abonnements :

curl -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  https://localhost:8080/api/push-notifications/subscriptions

S'abonner (via POST) :

curl -X POST \
  -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "endpoint": "https://fcm.googleapis.com/...",
    "keys": {
      "auth": "...",
      "p256dh": "..."
    }
  }' \
  https://localhost:8080/api/push-notifications/subscribe

Se désabonner :

curl -X DELETE \
  -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"endpoint": "https://fcm.googleapis.com/..."}' \
  https://localhost:8080/api/push-notifications/unsubscribe

Tests End-to-End​

Scénario complet​

  1. Configuration initiale :

    • ✅ Clés VAPID générées et configurées
    • ✅ Service worker enregistré
    • ✅ Backend démarre sans erreur

  2. Abonnement utilisateur :

    • ✅ L'utilisateur clique sur "Activer les notifications"
    • ✅ Le navigateur demande la permission
    • ✅ L'utilisateur autorise
    • ✅ L'abonnement est créé en base de données
    • ✅ L'endpoint /api/push-notifications/subscriptions retourne l'abonnement

  3. Envoi de notification :

    • ✅ Une action déclenche une notification (ex: action IA exécutée)
    • ✅ La notification apparaît dans le navigateur
    • ✅ La notification apparaît même si l'onglet est fermé
    • ✅ Cliquer sur la notification ouvre l'application
    • ✅ Vérifier les logs backend : Push notification batch completed → UserID: xxx | Sent: 1 | Failed: 0

  4. Désabonnement :

    • ✅ L'utilisateur peut se désabonner
    • ✅ L'abonnement est supprimé de la base de données
    • ✅ Plus de notifications ne sont envoyées

Dépannage​

Problème : "VAPID keys not configured"​

Solution :

  1. Vérifiez que VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY sont dans votre .env
  2. Redémarrez le backend
  3. Vérifiez les logs au démarrage

Problème : "Push notifications not supported"​

Solution :

  • Utilisez un navigateur moderne (Chrome, Firefox, Edge)
  • Vérifiez que vous êtes en HTTPS (ou localhost pour le développement)
  • Les notifications push ne fonctionnent pas en HTTP (sauf localhost)

Problème : "Permission denied"​

Solution :

  1. Réinitialisez les permissions dans le navigateur :
    • Chrome : Settings → Privacy → Site Settings → Notifications
    • Firefox : Settings → Privacy → Permissions → Notifications
  2. Réessayez l'abonnement

Problème : Notification reçue mais ne s'affiche pas​

Solution :

  1. Vérifiez que le service worker est actif
  2. Vérifiez les logs du service worker dans DevTools → Application → Service Workers
  3. Vérifiez que sw-push-handler.js est bien chargé

Problème : Erreur 410 ou 404 lors de l'envoi​

Solution :

  • L'abonnement est invalide ou expiré
  • Le service supprime automatiquement les abonnements invalides
  • L'utilisateur doit se réabonner

Vérification dans la Base de Données​

Vérifiez que les abonnements sont bien stockés :

SELECT id, user_id, endpoint, created_at
FROM push_subscriptions
ORDER BY created_at DESC;

Tests Automatisés (Optionnel)​

Pour des tests automatisés, vous pouvez créer un test unitaire :

// backend/src/notifications/__tests__/push-notifications.service.spec.ts
import { Test, TestingModule } from "@nestjs/testing";
import { PushNotificationsService } from "../push-notifications.service.js";

describe("PushNotificationsService", () => {
  let service: PushNotificationsService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [PushNotificationsService],
    }).compile();

    service = module.get<PushNotificationsService>(PushNotificationsService);
  });

  it("should return null public key if VAPID keys not configured", () => {
    const publicKey = service.getPublicKey();
    expect(publicKey).toBeNull();
  });

  // Ajoutez d'autres tests selon vos besoins
});

Notes Importantes​

  1. HTTPS requis en production : Les notifications push nécessitent HTTPS (sauf localhost)
  2. Service Worker requis : Le service worker doit être actif pour recevoir les notifications
  3. Permissions navigateur : L'utilisateur doit autoriser les notifications
  4. Abonnements uniques : Chaque navigateur/appareil a un endpoint unique
  5. Expiration des abonnements : Les abonnements peuvent expirer, il faut gérer la réinscription

Ressources​