Push-notiser

Skicka Web Push-notiser till dina användare, och låt AI:n koppla ihop allt.

Note

Verklig leverans via webbläsarens push-funktion är tillgänglig när din Proyecta Cloud-miljö har web-push-leveransadaptern aktiverad (PUSH_DELIVERY_ADAPTER=web-push). Med den aktiverad utfärdas ett giltigt P-256 VAPID-nyckelpar och notiser levereras till prenumererade webbläsare. När den är inaktiverad kör allt ändå hela flödet — prenumerationer sparas och utskick löser sig — men VAPID-nyckeln är en platshållare, så inga riktiga leveranser produceras och meddelanden loggas i stället för att pushas. Om dina push-notiser inte kommer fram är det här adaptern du ska kontrollera först.

Varje Proyecta-app kan skicka push-notiser via webbläsaren och som PWA till sina användare. Proyecta hanterar generering av VAPID-nycklar, lagring av prenumerationer, ämneshantering och leverans — inget tredjepartskonto krävs.

Så här fungerar det

Push-notiser i Proyecta följer den vanliga Web Push-livscykeln i fyra steg:

1. Aktivera — VAPID-nycklar genereras för din app första gången de behövs
2. Prenumerera — registrera en besökares enhet för att ta emot notiser
3. Identifiera — koppla en anonym prenumeration till en inloggad användare
4. Skicka — leverera en notis till specifika användare, ämnen eller alla

De tre första sköts åt dig inuti hooken usePush(); den fjärde gör du från din adminpanel.

Prenumerera en användares enhet

Din app levereras med en usePush()-hook som hanterar hela webbläsarflödet — hämtar VAPID-nyckeln, registrerar service workern, skapar Web Push-prenumerationen, lagrar hemligheten och kopplar en anonym prenumeration till användaren så fort hen loggar in. Inget av det gör du för 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>
    );
}

Det finns också ett färdigt block om du bara vill ha själva opt-in-prompten:

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

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

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

Anonyma besökare stöds — hooken prenumererar dem med ett genererat id och kopplar om den prenumerationen till deras konto automatiskt när de loggar in, så en notis du skickar senare når dem oavsett.

Skicka en notis

Att skicka är en ägaråtgärd, inte något din apps publika sidor gör — en besökares webbläsare får aldrig kunna pusha till hela din publik. Till vardags skickar du från avsnittet Push i din apps adminpanel: skriv titel och brödtext, välj ett ämne eller sänd till alla, och skicka ett test till din egen enhet först.

Du kan rikta dig till alla, eller bara till de besökare som prenumererar på ett visst ämne. En notis bär en titel, en brödtext och valfritt en ikon och en bild.

Efter utskicket får du en räkning på hur många enheter det gick till och hur många som misslyckades. En brasklapp: de siffrorna motsvarar verkliga webbläsarleveranser bara när web-push-leveransadaptern är aktiverad. Med den inaktiverad återspeglar räkningen hur många lagrade prenumerationer som riktades mot, inte faktiska leveranser — så läs den inte som en leveransbekräftelse i det fallet.

Ämnen

Besökare kan prenumerera på namngivna ämnen (t.ex. product-updates, weekly-digest) i stället för en enda allt-eller-inget-lista. Det här är det rekommenderade sättet att hantera opt-in — du behöver inte hålla koll på besökar-ID:n själv för sändningar till en bred grupp. Ämnen dyker upp som målgruppsväljare i adminpanelens Push-avsnitt.

Avprenumerera

Anropa unsubscribe från samma usePush()-hook — den håller redan prenumerationshemligheten, så det finns inget för dig att lagra eller skicka med:

const { subscribed, unsubscribe } = usePush();

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

Låt AI:n koppla ihop allt

Du behöver inte skriva något av det här för hand. Be AI:n:

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

Saker att tänka på

• Preview skickar inga riktiga push-notiser. Push-notiser fungerar bara på den publicerade versionen av din app eftersom webbläsare kräver HTTPS på ett riktigt ursprung.
• iOS kräver en PWA. På iOS 16.4+ fungerar Web Push bara från en installerad Progressive Web App (tillagd på hemskärmen), inte direkt från Safari.
• Tillstånd ges bara en gång. Om en användare nekar notistillstånd låter webbläsare dig inte be om det igen programmatiskt. Du måste guida dem till sina webbläsar- eller enhetsinställningar.

Kommer snart

• Schemalagda och händelsestyrda utskick — skicka automatiskt baserat på app-händelser eller ett schema
• Djuplänkning — öppna en specifik vy i appen när notisen trycks på