Notificări Push

Trimite notificări Web Push utilizatorilor tăi și lasă AI-ul să se ocupe de tot.

Mențiune

Livrarea reală a notificărilor push în browser este disponibilă atunci când mediul tău Proyecta Cloud are activat adaptorul de livrare web-push (PUSH_DELIVERY_ADAPTER=web-push). Cu acesta activat, este emisă o pereche de chei VAPID P-256 validă și notificările sunt livrate browserelor abonate. Când este dezactivat, totul continuă să funcționeze — abonamentele se stochează și trimiterile se rezolvă — dar cheia VAPID este un substituent, astfel că nu se produc livrări reale, iar mesajele sunt înregistrate în log în loc să fie trimise. Dacă notificările tale push nu ajung la destinație, acesta este primul lucru de verificat.

Orice aplicație Proyecta poate trimite notificări push în browser și în PWA utilizatorilor săi. Proyecta gestionează generarea cheilor VAPID, stocarea abonamentelor, managementul topic-urilor și livrarea — fără a fi necesar un cont terț.

Cum funcționează

Notificările push în Proyecta urmează ciclul de viață standard Web Push în patru pași:

1. Enable — cheile VAPID sunt generate pentru aplicația ta prima dată când e nevoie de ele
2. Subscribe — înregistrează dispozitivul unui vizitator pentru a primi notificări
3. Identify — leagă un abonament anonim de un utilizator autentificat
4. Send — livrează o notificare unor utilizatori specifici, topic-uri sau tuturor

Primii trei pași se întâmplă automat în interiorul hook-ului usePush(); pe al patrulea îl faci din panoul tău de administrare.

Abonează dispozitivul unui utilizator

Aplicația ta vine cu un hook usePush() care se ocupă de întregul flux din browser — preluarea cheii VAPID, înregistrarea service worker-ului, crearea abonamentului Web Push, stocarea secretului și legarea unui abonament anonim de utilizator odată ce acesta se autentifică. Nu faci nimic din toate acestea manual:

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

Există și un bloc gata făcut dacă vrei doar prompt-ul de opt-in:

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

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

Întreabă AI-ul: "Add a 'Notify me' button to the header that opts the visitor into push."

Vizitatorii anonimi sunt suportați — hook-ul îi abonează cu un id generat și releagă automat acel abonament de contul lor atunci când se autentifică, astfel încât o notificare trimisă ulterior ajunge la ei în oricare dintre situații.

Trimite o notificare

Trimiterea este o acțiune de proprietar, nu ceva ce fac paginile publice ale aplicației tale — browserul unui vizitator nu trebuie să poată niciodată trimite notificări întregii tale audiențe. De zi cu zi trimiți din secțiunea Push a panoului de administrare al aplicației tale: scrii titlul și textul, alegi un topic sau faci broadcast către toți și trimiți mai întâi un test pe propriul dispozitiv.

Poți targeta pe toată lumea sau doar vizitatorii abonați la un anumit topic. O notificare are un titlu, un text și, opțional, o iconiță și o imagine.

După trimitere primești numărul de dispozitive către care a plecat și câte au eșuat. O singură precizare: acele cifre reflectă livrări reale în browser doar când adaptorul de livrare web-push este activat. Cu el dezactivat, numărul reflectă câte abonamente stocate au fost targetate, nu livrările efective — deci nu îl citi ca o confirmare de livrare în acel caz.

Topic-uri

Vizitatorii se pot abona la topic-uri cu nume (de ex. product-updates, weekly-digest) în loc de o singură listă de tip totul-sau-nimic. Aceasta este metoda recomandată pentru gestionarea opt-in-urilor — nu trebuie să urmărești singur ID-urile vizitatorilor pentru actualizări de tip broadcast. Topic-urile apar ca selector de audiență în secțiunea Push din panoul de administrare.

Dezabonare

Apelează unsubscribe din același hook usePush() — acesta deține deja secretul abonamentului, deci nu ai nimic de stocat sau de transmis:

const { subscribed, unsubscribe } = usePush();

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

Lasă AI-ul să se ocupe de configurare

Nu trebuie să scrii nimic din acestea manual. Întreabă AI-ul:

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

Limitări

• Preview-ul nu trimite push-uri reale. Notificările push funcționează doar pe versiunea publicată a aplicației tale, deoarece browserele necesită HTTPS pe un origin real.
• iOS necesită un PWA. Pe iOS 16.4+, Web Push funcționează doar dintr-o Progressive Web App instalată (adăugată pe ecranul de pornire), nu direct din Safari.
• Permisiunea se acordă o singură dată. Dacă un utilizator refuză permisiunea pentru notificări, browserele nu îți permit să soliciți din nou programatic. Trebuie să îl ghidezi către setările browserului sau ale dispozitivului.

În curând

• Trimiteri programate și declanșate de evenimente — trimite automat pe baza evenimentelor din aplicație sau a unui program
• Deep linking — deschide un ecran specific din aplicație când notificarea este apăsată