Push Bildirimleri

Kullanıcılarınıza Web Push bildirimleri gönderin, geri kalanını AI halletsin.

Not

Gerçek tarayıcı push iletimi, Proyecta Cloud ortamınızda web-push iletim adaptörü etkinleştirildiğinde (PUSH_DELIVERY_ADAPTER=web-push) kullanılabilir. Etkin olduğunda geçerli bir P-256 VAPID anahtar çifti üretilir ve bildirimler abone olan tarayıcılara iletilir. Kapalı olduğunda her şey yine de çalışmaya devam eder — abonelikler kaydedilir ve gönderimler başarıyla sonuçlanır — ancak VAPID anahtarı bir yer tutucu olduğundan gerçek iletim gerçekleşmez ve mesajlar gönderilmek yerine loglanır. Push bildirimleriniz ulaşmıyorsa ilk kontrol edilecek yer bu adaptördür.

Her Proyecta uygulaması, kullanıcılarına tarayıcı ve PWA push bildirimleri gönderebilir. Proyecta, VAPID anahtar üretimini, abonelik depolamayı, konu yönetimini ve iletiyi ele alır — üçüncü taraf bir hesap gerekmez.

Nasıl çalışır

Proyecta’daki push bildirimleri, dört adımdan oluşan standart Web Push yaşam döngüsünü izler:

1. Enable — VAPID anahtarları, ilk ihtiyaç duyulduğunda uygulamanız için üretilir
2. Subscribe — bir ziyaretçinin cihazını bildirimleri alacak şekilde kaydedin
3. Identify — anonim bir aboneliği oturum açmış bir kullanıcıyla ilişkilendirin
4. Send — belirli kullanıcılara, konulara veya herkese bildirim gönderin

İlk üçü sizin için usePush() hook’unun içinde gerçekleşir; dördüncüsünü yönetici panelinizden yaparsınız.

Kullanıcının cihazını abone yapın

Uygulamanız, tarayıcı akışının tamamını yürüten bir usePush() hook’u ile gelir — VAPID anahtarını alma, service worker’ı kaydetme, Web Push aboneliğini oluşturma, secret’ı saklama ve kullanıcı oturum açtığında anonim aboneliği kullanıcıyla ilişkilendirme. Bunların hiçbirini elle yapmazsınız:

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

Yalnızca opt-in istemini isterseniz hazır bir blok da vardır:

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

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

AI’a şunu sorun: "Add a 'Notify me' button to the header that opts the visitor into push."

Anonim ziyaretçiler desteklenir — hook onları üretilen bir kimlikle abone eder ve oturum açtıklarında bu aboneliği otomatik olarak hesaplarına yeniden bağlar; böylece daha sonra gönderdiğiniz bir bildirim her iki durumda da onlara ulaşır.

Bildirim gönderin

Gönderim bir sahip işlemidir, uygulamanızın herkese açık sayfalarının yaptığı bir şey değil — bir ziyaretçinin tarayıcısı asla tüm kitlenize push gönderebilmemelidir. Günlük kullanımda gönderimi uygulamanızın yönetici panelindeki Push bölümünden yaparsınız: başlığı ve metni yazın, bir konu seçin ya da herkese yayın yapın ve önce kendi cihazınıza bir test gönderin.

Herkesi ya da yalnızca belirli bir konuya abone olan ziyaretçileri hedefleyebilirsiniz. Bir bildirim; bir başlık, bir metin ve isteğe bağlı olarak bir simge ve görsel taşır.

Gönderimden sonra kaç cihaza ulaştığını ve kaçının başarısız olduğunu gösteren bir sayı alırsınız. Tek uyarı: bu sayılar yalnızca web-push iletim adaptörü etkinken gerçek tarayıcı iletimlerini yansıtır. Kapalıyken sayı, gerçek iletimleri değil, hedeflenen kayıtlı abonelik sayısını gösterir — bu durumda bunu bir iletim onayı olarak okumayın.

Konular

Ziyaretçiler, hep-ya-hiç tek bir liste yerine adlandırılmış konulara (ör. product-updates, weekly-digest) abone olabilir. Opt-in’leri yönetmenin önerilen yolu budur — yayın tarzı güncellemeler için ziyaretçi ID’lerini kendiniz takip etmenize gerek kalmaz. Konular, yönetici panelinin Push bölümünde hedef kitle seçici olarak görünür.

Abonelikten çıkma

Aynı usePush() hook’undan unsubscribe çağırın — abonelik secret’ını zaten o tutar, dolayısıyla saklamanız veya geçirmeniz gereken bir şey yoktur:

const { subscribed, unsubscribe } = usePush();

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

AI her şeyi otomatik olarak ayarlasın

Bunların hiçbirini elle yazmak zorunda değilsiniz. AI’a şunu sorun:

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

Dikkat edilmesi gerekenler

• Preview gerçek push göndermez. Push bildirimleri yalnızca uygulamanızın yayınlanmış sürümünde çalışır; çünkü tarayıcılar gerçek bir origin’de HTTPS gerektirir.
• iOS, PWA gerektirir. iOS 16.4 ve sonrasında Web Push, yalnızca yüklenmiş bir Progressive Web App’ten (ana ekrana eklenmiş) çalışır; doğrudan Safari’den değil.
• İzin tek seferlik bir fırsattır. Kullanıcı bildirim iznini reddederse tarayıcılar programlı olarak yeniden izin istemenize izin vermez. Kullanıcıyı tarayıcı veya cihaz ayarlarına yönlendirmeniz gerekir.

Yakında

• Zamanlanmış ve olay tetiklemeli gönderimler — uygulama olaylarına veya bir programa göre otomatik olarak gönderin
• Deep linking — bildirime dokunulduğunda uygulamada belirli bir ekranı açın