Push-Benachrichtigungen

Sende Web-Push-Benachrichtigungen an deine Nutzer und lass die KI alles verdrahten.

Hinweis

Echte Browser-Push-Zustellung ist verfügbar, wenn deine Proyecta Cloud-Umgebung den Web-Push-Delivery-Adapter aktiviert hat (PUSH_DELIVERY_ADAPTER=web-push). Ist er aktiv, wird ein gültiges P-256-VAPID-Schlüsselpaar ausgestellt und Benachrichtigungen werden an abonnierte Browser zugestellt. Ist er deaktiviert, läuft trotzdem alles durch – Abonnements werden gespeichert und Sends lösen auf –, aber der VAPID-Schlüssel ist ein Platzhalter, sodass keine echten Zustellungen erzeugt und Nachrichten nur geloggt statt gepusht werden. Wenn deine Pushes nicht ankommen, ist dieser Adapter die erste Stelle, die du überprüfen solltest.

Jede Proyecta-App kann Browser- und PWA-Push-Benachrichtigungen an ihre Nutzer senden. Proyecta übernimmt die VAPID-Schlüsselgenerierung, Abonnement-Speicherung, Topic-Verwaltung und Zustellung – kein Drittanbieter-Konto erforderlich.

So funktioniert es

Push-Benachrichtigungen in Proyecta folgen dem Standard-Web-Push-Lebenszyklus in vier Schritten:

1. Enable — VAPID-Schlüssel werden für deine App generiert, sobald sie zum ersten Mal gebraucht werden
2. Subscribe — das Gerät eines Besuchers für den Empfang von Benachrichtigungen registrieren
3. Identify — ein anonymes Abonnement mit einem angemeldeten Nutzer verknüpfen
4. Send — eine Benachrichtigung an bestimmte Nutzer, Topics oder alle zustellen

Die ersten drei Schritte übernimmt der Hook usePush() für dich, den vierten erledigst du in deinem Admin-Panel.

Das Gerät eines Nutzers abonnieren

Deine App bringt einen Hook usePush() mit, der den kompletten Browser-Ablauf übernimmt – den VAPID-Schlüssel holen, den Service Worker registrieren, das Web-Push-Abonnement anlegen, das Secret speichern und ein anonymes Abonnement mit dem Nutzer verknüpfen, sobald er sich anmeldet. Nichts davon machst du von Hand:

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

Es gibt auch einen fertigen Block, wenn du nur den Opt-in-Hinweis brauchst:

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

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

Frag die KI: "Add a 'Notify me' button to the header that opts the visitor into push."

Anonyme Besucher werden unterstützt – der Hook abonniert sie mit einer generierten ID und verknüpft dieses Abonnement automatisch mit ihrem Konto, sobald sie sich anmelden. Eine später gesendete Benachrichtigung erreicht sie also in beiden Fällen.

Eine Benachrichtigung senden

Das Senden ist eine Inhaber-Aktion und nichts, was die öffentlichen Seiten deiner App tun – der Browser eines Besuchers darf niemals an dein gesamtes Publikum pushen können. Im Alltag sendest du aus dem Bereich Push im Admin-Panel deiner App: Titel und Text schreiben, ein Topic wählen oder an alle senden, und vorher einen Test an dein eigenes Gerät schicken.

Du kannst alle ansprechen oder nur die Besucher, die ein bestimmtes Topic abonniert haben. Eine Benachrichtigung trägt einen Titel, einen Text und optional ein Icon und ein Bild.

Nach dem Senden bekommst du eine Zahl, an wie viele Geräte sie ging und wie viele fehlgeschlagen sind. Ein Vorbehalt: Diese Zahlen spiegeln nur dann echte Browser-Zustellungen wider, wenn der Web-Push-Delivery-Adapter aktiv ist. Ist er deaktiviert, gibt die Zahl an, wie viele gespeicherte Abonnements angesprochen wurden, nicht die tatsächlichen Zustellungen – lies sie in diesem Fall also nicht als Zustellungsbestätigung.

Topics

Besucher können benannte Topics abonnieren (z. B. product-updates, weekly-digest) statt einer einzigen Alles-oder-nichts-Liste. Dies ist die empfohlene Methode zur Verwaltung von Opt-ins – du musst Visitor-IDs für Broadcast-artige Updates nicht selbst verfolgen. Topics erscheinen als Zielgruppen-Auswahl im Push-Bereich des Admin-Panels.

Abbestellen

Ruf unsubscribe aus demselben usePush()-Hook auf – er hält das Abonnement-Secret bereits, du musst also nichts speichern oder übergeben:

const { subscribed, unsubscribe } = usePush();

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

Die KI alles verdrahten lassen

Du musst nichts davon von Hand schreiben. Frag die KI:

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

Einschränkungen

• Preview sendet keine echten Pushes. Push-Benachrichtigungen funktionieren nur in der veröffentlichten Version deiner App, da Browser HTTPS auf einem echten Origin voraussetzen.
• iOS erfordert eine PWA. Unter iOS 16.4+ funktioniert Web Push nur aus einer installierten Progressive Web App (zum Startbildschirm hinzugefügt), nicht direkt aus Safari.
• Berechtigungsanfrage ist einmalig. Wenn ein Nutzer die Benachrichtigungsberechtigung ablehnt, erlauben Browser keine programmatische Neuanfrage. Du musst ihn zu seinen Browser- oder Geräteeinstellungen leiten.

Demnächst verfügbar

• Geplante und ereignisgesteuerte Sends — automatisch senden basierend auf App-Ereignissen oder einem Zeitplan
• Deep Linking — beim Tippen auf die Benachrichtigung einen bestimmten Bildschirm in der App öffnen