Push Notifications

Kirim notifikasi Web Push ke pengguna Anda, dan biarkan AI mengatur semuanya.

Catatan

Pengiriman push ke browser secara nyata tersedia ketika environment Proyecta Cloud Anda memiliki web-push delivery adapter yang diaktifkan (PUSH_DELIVERY_ADAPTER=web-push). Jika aktif, sepasang kunci VAPID P-256 yang valid diterbitkan dan notifikasi dikirimkan ke browser yang berlangganan. Jika tidak aktif, semuanya tetap berjalan — subscription tersimpan dan pengiriman berhasil diselesaikan — tetapi kunci VAPID-nya hanya berupa placeholder, sehingga tidak ada pengiriman nyata yang dihasilkan dan pesan hanya dicatat (logged) alih-alih dikirim. Jika push Anda tidak sampai, adapter ini adalah hal pertama yang perlu diperiksa.

Setiap aplikasi Proyecta dapat mengirim notifikasi push ke browser dan PWA untuk penggunanya. Proyecta menangani pembuatan kunci VAPID, penyimpanan subscription, manajemen topik, dan pengiriman — tanpa memerlukan akun pihak ketiga.

Cara kerjanya

Notifikasi push di Proyecta mengikuti siklus hidup Web Push standar dengan empat langkah:

1. Enable — kunci VAPID dibuat untuk aplikasi Anda saat pertama kali dibutuhkan
2. Subscribe — daftarkan perangkat pengunjung untuk menerima notifikasi
3. Identify — hubungkan subscription anonim ke pengguna yang sudah login
4. Send — kirim notifikasi ke pengguna tertentu, topik, atau semua orang

Tiga langkah pertama terjadi secara otomatis di dalam hook usePush(); langkah keempat Anda lakukan dari panel admin.

Subscribe perangkat pengguna

Aplikasi Anda sudah dilengkapi hook usePush() yang menangani seluruh alur di browser — mengambil kunci VAPID, mendaftarkan service worker, membuat subscription Web Push, menyimpan secret-nya, dan menghubungkan subscription anonim ke pengguna begitu mereka login. Anda tidak perlu melakukan satu pun dari itu secara 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>
    );
}

Ada juga blok siap pakai jika Anda hanya ingin prompt opt-in:

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

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

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

Pengunjung anonim juga didukung — hook ini men-subscribe mereka dengan id yang dibuat otomatis dan menghubungkan kembali subscription tersebut ke akun mereka secara otomatis ketika mereka login, sehingga notifikasi yang Anda kirim nanti tetap sampai kepada mereka.

Kirim notifikasi

Pengiriman adalah aksi pemilik, bukan sesuatu yang dilakukan oleh halaman publik aplikasi Anda — browser pengunjung tidak boleh bisa mengirim push ke seluruh audiens Anda. Sehari-hari, Anda mengirim dari bagian Push pada panel admin aplikasi Anda: tulis judul dan isinya, pilih sebuah topik atau broadcast ke semua orang, dan kirim tes ke perangkat Anda sendiri terlebih dahulu.

Anda dapat menarget semua orang, atau hanya pengunjung yang berlangganan topik tertentu. Sebuah notifikasi membawa judul, isi, dan secara opsional ikon serta gambar.

Setelah mengirim, Anda mendapatkan jumlah perangkat yang menerimanya dan berapa yang gagal. Satu catatan: angka-angka itu hanya mencerminkan pengiriman nyata ke browser ketika web-push delivery adapter aktif. Jika tidak aktif, angkanya mencerminkan jumlah subscription tersimpan yang ditarget, bukan pengiriman aktual — jadi jangan membacanya sebagai konfirmasi pengiriman dalam kasus tersebut.

Topik

Pengunjung dapat berlangganan ke topik bernama (misalnya product-updates, weekly-digest) alih-alih satu daftar semua-atau-tidak-sama-sekali. Ini adalah cara yang direkomendasikan untuk mengelola opt-in — Anda tidak perlu melacak visitor ID sendiri untuk pembaruan bergaya broadcast. Topik muncul sebagai pemilih audiens di bagian Push pada panel admin.

Unsubscribe

Panggil unsubscribe dari hook usePush() yang sama — hook itu sudah memegang secret subscription-nya, jadi tidak ada yang perlu Anda simpan atau teruskan:

const { subscribed, unsubscribe } = usePush();

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

Biarkan AI mengatur semuanya

Anda tidak perlu menulis semua ini secara manual. Tanyakan ke 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."

Catatan penting

• Preview tidak mengirim push nyata. Notifikasi push hanya berfungsi pada versi yang sudah dipublish dari aplikasi Anda karena browser memerlukan HTTPS pada origin yang sesungguhnya.
• iOS memerlukan PWA. Pada iOS 16.4+, Web Push hanya berfungsi dari Progressive Web App yang sudah diinstal (ditambahkan ke home screen), bukan langsung dari Safari.
• Izin hanya bisa diminta sekali. Jika pengguna menolak izin notifikasi, browser tidak mengizinkan Anda meminta ulang secara programatik. Anda harus mengarahkan mereka ke pengaturan browser atau perangkat mereka.

Segera hadir

• Pengiriman terjadwal dan berbasis event — kirim secara otomatis berdasarkan event aplikasi atau jadwal tertentu
• Deep linking — buka layar tertentu dalam aplikasi ketika notifikasi diketuk