Notifications Push

Envoyez des notifications Web Push à vos utilisateurs, et laissez l’IA tout brancher.

Note

La livraison réelle des push navigateur est disponible lorsque votre environnement Proyecta Cloud a l’adaptateur de livraison web-push activé (PUSH_DELIVERY_ADAPTER=web-push). Avec cet adaptateur activé, une paire de clés VAPID P-256 valide est émise et les notifications sont délivrées aux navigateurs abonnés. Sans lui, tout effectue quand même les allers-retours — les abonnements sont stockés et les envois se résolvent — mais la clé VAPID est un placeholder, donc aucune livraison réelle n’est produite et les messages sont journalisés plutôt qu’envoyés. Si vos pushs n’arrivent pas, cet adaptateur est la première chose à vérifier.

Toute application Proyecta peut envoyer des notifications push navigateur et PWA à ses utilisateurs. Proyecta gère la génération des clés VAPID, le stockage des abonnements, la gestion des topics et la livraison — aucun compte tiers n’est nécessaire.

Comment ça fonctionne

Les notifications push dans Proyecta suivent le cycle de vie standard du Web Push en quatre étapes :

1. Enable — les clés VAPID sont générées pour ton application dès qu’elles sont nécessaires
2. Subscribe — enregistrer l’appareil d’un visiteur pour recevoir des notifications
3. Identify — lier un abonnement anonyme à un utilisateur connecté
4. Send — délivrer une notification à des utilisateurs spécifiques, des topics, ou à tout le monde

Les trois premières étapes sont prises en charge pour toi par le hook usePush() ; la quatrième se fait depuis ton panneau d’administration.

Abonner l’appareil d’un utilisateur

Ton application embarque un hook usePush() qui gère tout le flux côté navigateur — récupération de la clé VAPID, enregistrement du service worker, création de l’abonnement Web Push, stockage du secret, et rattachement d’un abonnement anonyme à l’utilisateur dès qu’il se connecte. Tu n’as rien de tout cela à faire à la main :

import { usePush } from '@/hooks/usePush.ts';

function NotifyMeButton() {
    const { supported, subscribed, subscribe, unsubscribe, isPending } = usePush();

    // `supported: false` means this browser cannot do push at all — hide the CTA.
    if (!supported) return null;

    return (
        <button onClick={subscribed ? unsubscribe : subscribe} disabled={isPending}>
            {subscribed ? 'Turn off notifications' : 'Notify me'}
        </button>
    );
}

Il existe aussi un bloc prêt à l’emploi si tu veux simplement l’invitation à s’abonner :

import { PushOptInButton } from '@/components/blocks/PushOptInButton.tsx';

<PushOptInButton description="Get told the moment a new drop lands." />;

Demande à l’IA : "Add a 'Notify me' button to the header that opts the visitor into push."

Les visiteurs anonymes sont pris en charge — le hook les abonne avec un identifiant généré et rattache automatiquement cet abonnement à leur compte lorsqu’ils se connectent, si bien qu’une notification envoyée plus tard les atteint dans les deux cas.

Envoyer une notification

L’envoi est une action de propriétaire, pas quelque chose que font les pages publiques de ton application — le navigateur d’un visiteur ne doit jamais pouvoir envoyer un push à toute ton audience. Au quotidien, tu envoies depuis la section Push du panneau d’administration de ton application : rédige le titre et le corps du message, choisis un topic ou une diffusion générale, et envoie d’abord un test sur ton propre appareil.

Tu peux cibler tout le monde, ou seulement les visiteurs abonnés à un topic donné. Une notification comporte un titre, un corps de message, et éventuellement une icône et une image.

Après l’envoi, tu obtiens le nombre d’appareils atteints et le nombre d’échecs. Une réserve : ces chiffres ne reflètent les livraisons navigateur réelles que lorsque l’adaptateur de livraison web-push est activé. Sans lui, le compteur reflète le nombre d’abonnements stockés ciblés, et non les livraisons réelles — ne le lis donc pas comme une confirmation de livraison dans ce cas.

Topics

Les visiteurs peuvent s’abonner à des topics nommés (ex. product-updates, weekly-digest) plutôt qu’à une seule liste tout-ou-rien. C’est la méthode recommandée pour gérer les opt-ins — tu n’as pas besoin de suivre toi-même les visitor IDs pour les mises à jour de type broadcast. Les topics apparaissent comme sélecteur d’audience dans la section Push du panneau d’administration.

Se désabonner

Appelle unsubscribe depuis ce même hook usePush() — il détient déjà le secret de l’abonnement, tu n’as donc rien à stocker ni à transmettre :

const { subscribed, unsubscribe } = usePush();

{
    subscribed && <button onClick={unsubscribe}>Turn off notifications</button>;
}

Laisser l’IA tout brancher

Tu n’as pas à écrire tout ça à la main. Demande à l’IA :

• "Add a 'Notify me' button to the header that opts the visitor into push notifications."
• "Put a push opt-in prompt on the product page, but only show it to visitors who haven't already subscribed."
• "Add a topic called 'breaking-news' that visitors can opt into from the footer."

Mises en garde

• Le preview ne déclenche pas de vrais push. Les notifications push ne fonctionnent que sur la version publiée de ton application, car les navigateurs exigent HTTPS sur une vraie origine.
• iOS nécessite une PWA. Sur iOS 16.4+, le Web Push ne fonctionne qu’à partir d’une Progressive Web App installée (ajoutée à l’écran d’accueil), pas directement depuis Safari.
• La permission ne se demande qu’une fois. Si un utilisateur refuse la permission de notification, les navigateurs ne permettent pas de relancer la demande par programmation. Tu dois le guider vers les paramètres de son navigateur ou de son appareil.

Prochainement

• Envois planifiés et déclenchés par des événements — envoyer automatiquement en fonction d’événements applicatifs ou d’un planning
• Deep linking — ouvrir un écran spécifique de l’application lorsque la notification est tappée