Powiadomienia Push

Wysyłaj powiadomienia Web Push do swoich użytkowników i pozwól, żeby AI połączyła wszystko ze sobą.

Notatka

Rzeczywiste dostarczanie powiadomień push w przeglądarce jest dostępne, gdy środowisko Proyecta Cloud ma włączony adapter dostarczania web-push (PUSH_DELIVERY_ADAPTER=web-push). Gdy jest włączony, wydawana jest prawidłowa para kluczy VAPID P-256, a powiadomienia są dostarczane do subskrybowanych przeglądarek. Gdy jest wyłączony, wszystko nadal wykonuje pełen cykl zapytań — subskrypcje są zapisywane, a wysyłki kończą się sukcesem — ale klucz VAPID jest zastępczy, więc nie powstają rzeczywiste dostarczenia, a wiadomości są logowane zamiast wysyłane. Jeśli Twoje powiadomienia push nie docierają, ten adapter to pierwsza rzecz do sprawdzenia.

Każda aplikacja w Proyecta może wysyłać powiadomienia push do przeglądarki i PWA do swoich użytkowników. Proyecta obsługuje generowanie kluczy VAPID, przechowywanie subskrypcji, zarządzanie tematami i dostarczanie — bez potrzeby korzystania z kont zewnętrznych dostawców.

Jak to działa

Powiadomienia push w Proyecta działają zgodnie ze standardowym cyklem życia Web Push i składają się z czterech kroków:

1. Włączenie — klucze VAPID dla Twojej aplikacji są generowane przy pierwszej potrzebie
2. Subskrypcja — rejestracja urządzenia odwiedzającego do odbierania powiadomień
3. Identyfikacja — powiązanie anonimowej subskrypcji z zalogowanym użytkownikiem
4. Wysyłka — dostarczenie powiadomienia do konkretnych użytkowników, tematów lub wszystkich

Pierwsze trzy kroki wykonuje za Ciebie hook usePush(); czwarty realizujesz z panelu administracyjnego.

Subskrybuj urządzenie użytkownika

Twoja aplikacja zawiera hook usePush(), który obsługuje cały przepływ w przeglądarce — pobranie klucza VAPID, rejestrację service workera, utworzenie subskrypcji Web Push, przechowanie sekretu oraz powiązanie anonimowej subskrypcji z użytkownikiem po jego zalogowaniu. Nie musisz robić nic z tego ręcznie:

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

Jest też gotowy blok, jeśli potrzebujesz tylko samego monitu o zgodę:

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

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

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

Anonimowi odwiedzający są obsługiwani — hook subskrybuje ich z wygenerowanym identyfikatorem i automatycznie przepina tę subskrypcję na ich konto po zalogowaniu, więc powiadomienie wysłane później dotrze do nich w obu przypadkach.

Wyślij powiadomienie

Wysyłka to działanie właściciela, a nie coś, co robią publiczne strony Twojej aplikacji — przeglądarka odwiedzającego nigdy nie może wysłać powiadomienia do całej Twojej publiczności. Na co dzień wysyłasz z sekcji Push panelu administracyjnego swojej aplikacji: wpisujesz tytuł i treść, wybierasz temat lub broadcast do wszystkich, a najpierw wysyłasz test na własne urządzenie.

Możesz wskazać wszystkich albo tylko odwiedzających subskrybujących określony temat. Powiadomienie zawiera tytuł, treść, a opcjonalnie ikonę i obraz.

Po wysyłce otrzymujesz liczbę urządzeń, do których trafiła, oraz liczbę niepowodzeń. Jedno zastrzeżenie: te liczby odzwierciedlają rzeczywiste dostarczenia do przeglądarek tylko wtedy, gdy adapter dostarczania web-push jest włączony. Gdy jest wyłączony, liczba odzwierciedla liczbę przechowywanych subskrypcji będących celem, a nie faktyczne dostarczenia — nie traktuj jej wtedy jako potwierdzenia dostarczenia.

Tematy

Odwiedzający mogą subskrybować nazwane tematy (np. product-updates, weekly-digest) zamiast jednej listy „wszystko albo nic“. Jest to zalecany sposób zarządzania zgodami — nie musisz samodzielnie śledzić ID gości w przypadku aktualizacji typu broadcast. Tematy pojawiają się jako selektor odbiorców w sekcji Push panelu administracyjnego.

Anulowanie subskrypcji

Wywołaj unsubscribe z tego samego hooka usePush() — przechowuje on już sekret subskrypcji, więc nie musisz niczego zapisywać ani przekazywać:

const { subscribed, unsubscribe } = usePush();

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

Pozwól, żeby AI to skonfigurował

Nie musisz pisać niczego z tego ręcznie. Zapytaj 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."

Zastrzeżenia

• Preview nie wysyła prawdziwych powiadomień push. Powiadomienia push działają tylko w opublikowanej wersji Twojej aplikacji, ponieważ przeglądarki wymagają HTTPS na prawdziwym adresie origin.
• iOS wymaga PWA. Na iOS 16.4+ Web Push działa tylko z zainstalowanej Progressive Web App (dodanej do ekranu głównego), a nie bezpośrednio z Safari.
• Uprawnienie jest jednorazowe. Jeśli użytkownik odrzuci uprawnienie do powiadomień, przeglądarki nie pozwalają na ponowne wyświetlenie prośby programowo. Musisz nakierować go na ustawienia przeglądarki lub urządzenia.

Wkrótce

• Zaplanowane i wyzwalane zdarzeniami wysyłki — wysyłaj automatycznie na podstawie zdarzeń w aplikacji lub harmonogramu
• Deep linking — otwieranie konkretnego ekranu w aplikacji po dotknięciu powiadomienia