Push Notificaties

Stuur Web Push-notificaties naar je gebruikers. Stel in met de SDK en laat de AI alles koppelen.

Opmerking

Push-notificatie-API’s zijn gedeeltelijk functioneel op SDK-niveau — abonnementen worden opgeslagen en verzendoproepen worden zonder fout afgerond. Daadwerkelijke browserlevering van push-berichten is echter nog niet ingeschakeld in productie: de VAPID-sleutels die door enable() worden geretourneerd zijn willekeurige bytes, geen geldige P-256 EC-sleutels, waardoor browserabonnement (pushManager.subscribe) mislukt totdat productielevering is ingeschakeld. Berichten worden gelogd maar niet naar apparaten gepusht. Productielevering komt binnenkort.

Elke Proyecta-app kan browser- en PWA-pushnotificaties sturen naar gebruikers. De Proyecta SDK regelt het genereren van VAPID-sleutels, het opslaan van abonnementen, het beheren van topics en de levering — geen account bij een derde partij vereist.

Hoe het werkt

Pushnotificaties in Proyecta volgen de standaard Web Push-levenscyclus met vier stappen:

1. Enable — genereer VAPID-sleutels voor je app (eenmalig)
2. Subscribe — registreer het apparaat van een gebruiker om notificaties te ontvangen
3. Identify — koppel een anoniem abonnement aan een ingelogde gebruiker
4. Send — lever een notificatie af aan specifieke gebruikers, topics of iedereen

Alle vier zijn beschikbaar onder proyecta.pushNotifications in de SDK.

Push inschakelen voor je app

De eerste aanroep genereert een VAPID-publieke sleutel die de browser nodig heeft om een abonnement aan te maken. De aanroep is idempotent — hem opnieuw aanroepen geeft dezelfde sleutel terug.

import Proyecta from '@proyecta-ai/sdk';

const proyecta = new Proyecta({ apiKey: process.env.PROYECTA_API_KEY });

const { vapidPublicKey } = await proyecta.pushNotifications.enable();

Vraag de AI: "Enable push notifications and store the VAPID key in a PROYECTA_VAPID_PUBLIC_KEY env var".

Een apparaat van een gebruiker abonneren

Maak op de client een Web Push-abonnement aan met de VAPID-sleutel en stuur dit samen met een visitorId naar de server:

// client side
const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: PROYECTA_VAPID_PUBLIC_KEY,
});

// server side (or via your API route)
const { secret } = await proyecta.pushNotifications.subscribe({
    visitorId: currentUser?.id ?? generateAnonymousId(),
    subscription: {
        endpoint: subscription.endpoint,
        keys: {
            auth: subscription.keys.auth,
            p256dh: subscription.keys.p256dh,
        },
    },
});
// Store `secret` on the client — it's required to unsubscribe or identify later

Gebruik een geverifieerd gebruikers-ID als visitorId als de gebruiker is ingelogd, of een gegenereerde UUID voor anonieme bezoekers.

Anonieme abonnementen koppelen aan gebruikers

Wanneer een anonieme bezoeker inlogt, koppel je hun bestaande abonnement aan het geverifieerde gebruikers-ID zodat de volgende send hen kan bereiken:

await proyecta.pushNotifications.identify({
    secret: storedSubscriptionSecret,
    userId: authenticatedUser.id,
});

Een notificatie sturen

Je kunt specifieke visitor-ID’s, topics, beide (als een samenvoeging) of iedereen als doelgroep instellen. Laat zowel visitorIds als topics weg om naar iedereen te broadcasten.

// Send to specific users
await proyecta.pushNotifications.send({
    title: 'Your order has shipped',
    body: 'Track it from your dashboard',
    visitorIds: ['user_123', 'user_456'],
    data: { orderId: 'ord_789' }, // custom payload
});

// Send to everyone subscribed to a topic
await proyecta.pushNotifications.send({
    title: 'New feature just dropped',
    topics: ['product-updates'],
    icon: 'https://cdn.example.com/icon.png',
    image: 'https://cdn.example.com/banner.png',
});

// Broadcast to all subscribers
await proyecta.pushNotifications.send({
    title: 'Scheduled maintenance at 2am UTC',
});

send geeft { sent, failed } terug zodat je weet hoe de levering is verlopen. Het sent-aantal in de huidige stub-respons geeft het aantal beoogde opgeslagen abonnementen weer, niet de daadwerkelijke browserlevering — vertrouw er niet op als leveringsbevestiging totdat productielevering is ingeschakeld.

Topics

Gebruikers kunnen zich abonneren op benoemde topics (bijv. product-updates, weekly-digest) via de sub-resource proyecta.pushNotifications.topics. Dit is de aanbevolen manier om opt-in-lijsten te beheren — je hoeft visitor-ID’s niet zelf bij te houden voor broadcast-achtige updates.

Uitschrijven

Verwijder een abonnement met behulp van het secret dat werd geretourneerd door subscribe:

await proyecta.pushNotifications.unsubscribe({ secret });

Laat de AI het koppelen

Je hoeft dit allemaal niet zelf te schrijven. Vraag de AI:

• "Enable push notifications for my app. Register a service worker, call pushNotifications.subscribe on the client after the user grants permission, and store the secret in localStorage."
• "Send a push to all users subscribed to the 'breaking-news' topic whenever a new article is published."
• "After a user signs in, call pushNotifications.identify to link their anonymous subscription to their user ID."

Aandachtspunten

• Preview verstuurt geen echte pushberichten. Pushnotificaties werken alleen op de gepubliceerde versie van je app, omdat browsers HTTPS op een echte origin vereisen.
• iOS vereist een PWA. Op iOS 16.4+ werkt Web Push alleen vanuit een geïnstalleerde Progressive Web App (toegevoegd aan het beginscherm), niet rechtstreeks vanuit Safari.
• Toestemming is eenmalig. Als een gebruiker notificatiemachtiging weigert, kunnen browsers niet programmatisch opnieuw om toestemming vragen. Je moet hen verwijzen naar hun browser- of apparaatinstellingen.

Binnenkort beschikbaar

• Geplande en door events getriggerde verzendingen — automatisch versturen op basis van app-events of een schema
• Deep linking — een specifiek scherm in de app openen wanneer op de notificatie wordt getikt