Pushmeldingen

Stuur Web Push-meldingen naar je gebruikers en laat de AI de rest regelen.

Opmerking

Echte browserpush-bezorging is beschikbaar wanneer je Proyecta Cloud-omgeving de web-push delivery adapter heeft ingeschakeld (PUSH_DELIVERY_ADAPTER=web-push). Als dat het geval is, wordt er een geldig P-256 VAPID-sleutelpaar uitgegeven en worden meldingen bezorgd bij geabonneerde browsers. Als dit uitgeschakeld is, werkt alles nog steeds — abonnementen worden opgeslagen en verzendingen worden opgelost — maar de VAPID-sleutel is een placeholder, waardoor er geen echte bezorgingen plaatsvinden en berichten worden gelogd in plaats van gepusht. Als je pushmeldingen niet aankomen, is deze adapter het eerste dat je moet controleren.

Elke Proyecta-app kan browser- en PWA-pushmeldingen sturen naar zijn gebruikers. Proyecta regelt het genereren van VAPID-sleutels, het opslaan van abonnementen, het beheren van onderwerpen en de bezorging — geen account bij een derde partij nodig.

Hoe het werkt

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

1. Inschakelen — VAPID-sleutels worden voor je app gegenereerd zodra ze voor het eerst nodig zijn
2. Abonneren — registreer het apparaat van een bezoeker om meldingen te ontvangen
3. Identificeren — koppel een anoniem abonnement aan een ingelogde gebruiker
4. Versturen — bezorg een melding aan specifieke gebruikers, onderwerpen of iedereen

De eerste drie gebeuren voor je binnen de usePush()-hook; de vierde doe je vanuit je adminpaneel.

Het apparaat van een gebruiker abonneren

Je app wordt geleverd met een usePush()-hook die de hele browserflow afhandelt — de VAPID-sleutel ophalen, de service worker registreren, het Web Push-abonnement aanmaken, het secret opslaan en een anoniem abonnement koppelen aan de gebruiker zodra die inlogt. Dat doe je dus allemaal niet zelf:

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>
    );
}

Er is ook een kant-en-klaar blok als je alleen de opt-in-prompt wilt:

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

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

Vraag de AI: "Add a 'Notify me' button to the header that opts the visitor into push."

Anonieme bezoekers worden ondersteund — de hook abonneert ze met een gegenereerd id en koppelt dat abonnement automatisch opnieuw aan hun account zodra ze inloggen, zodat een melding die je later stuurt hen hoe dan ook bereikt.

Een melding versturen

Versturen is een eigenaarsactie, niet iets wat de publieke pagina’s van je app doen — de browser van een bezoeker mag nooit naar je hele publiek kunnen pushen. In de praktijk verstuur je vanuit de sectie Push van het adminpaneel van je app: schrijf de titel en de tekst, kies een onderwerp of broadcast naar iedereen, en stuur eerst een test naar je eigen apparaat.

Je kunt iedereen targeten, of alleen de bezoekers die op een bepaald onderwerp zijn geabonneerd. Een melding bevat een titel, een tekst en optioneel een pictogram en een afbeelding.

Na het versturen krijg je te zien naar hoeveel apparaten hij is gegaan en hoeveel er zijn mislukt. Eén kanttekening: die aantallen weerspiegelen alleen echte browserbezorgingen wanneer de web-push delivery adapter aanstaat. Staat die uit, dan geeft het aantal weer hoeveel opgeslagen abonnementen zijn getarget, niet de werkelijke bezorgingen — lees het in dat geval dus niet als bezorgingsbevestiging.

Onderwerpen

Bezoekers kunnen zich abonneren op benoemde onderwerpen (bijv. product-updates, weekly-digest) in plaats van op één alles-of-niets-lijst. Dit is de aanbevolen manier om opt-ins te beheren — je hoeft bezoeker-ID’s niet zelf bij te houden voor broadcast-achtige updates. Onderwerpen verschijnen als de doelgroepkiezer in de sectie Push van het adminpaneel.

Afmelden

Roep unsubscribe aan vanuit diezelfde usePush()-hook — die heeft het abonnements-secret al, dus je hoeft niets op te slaan of mee te geven:

const { subscribed, unsubscribe } = usePush();

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

Laat de AI het regelen

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

• "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."

Aandachtspunten

• Preview verstuurt geen echte pushmeldingen. Pushmeldingen 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 startscherm), niet rechtstreeks vanuit Safari.
• Toestemming is eenmalig. Als een gebruiker meldingtoestemming weigert, kunnen browsers je niet programmatisch opnieuw laten vragen. Je moet ze naar hun browser- of apparaatinstellingen verwijzen.

Binnenkort beschikbaar

• Geplande en gebeurtenisgestuurde verzendingen — verstuur automatisch op basis van app-gebeurtenissen of een schema
• Deep linking — open een specifiek scherm in de app wanneer op de melding wordt getikt