PANDUAN CEPAT (3 MENIT)

Bagaimana Cara Kerja Subscriber Otomatis di PushNotif?

Owner website sama sekali tidak perlu menambahkan subscriber secara manual. Begitu kode SDK dipasang di website klien, jumlah subscriber akan bertambah sendiri secara otomatis setiap kali ada pengunjung yang mengklik tombol izin notifikasi.

1. Pasang 2 File di Web

Owner menaruh file pushnotif-sw.js di root domain dan menempelkan 1 baris script SDK sebelum </body>.

2. User Klik "Allow / Izinkan"

Pengunjung membuka web klien & menekan tombol Lonceng. Browser meminta izin resmi ke Google FCM / Apple APNs.

3. Masuk Database Otomatis

SDK mengirim token terenkripsi ke server PushNotif. Angka Subscriber Aktif di Dashboard langsung naik (+1) otomatis!

LANGKAH 1 — FILE SERVICE WORKER

Taruh File `pushnotif-sw.js` di Root Domain Klien

Standar keamanan browser W3C mewajibkan file Service Worker berada di root domain klien (contoh: https://daftarkajian.web.id/pushnotif-sw.js) agar notifikasi muncul 100% atas nama domain & logo perusahaan klien. Buat file bernama pushnotif-sw.js di folder publik utama website Anda dengan isi 1 baris ini:

importScripts("https://pushnotif.biz.id/sdk/pushnotif-sw.js");

LANGKAH 2 — PASANG SCRIPT SDK DI HTML

Tempelkan Script SDK Sebelum `</body>`

Dengan opsi autoPrompt: true, SDK otomatis memunculkan Tombol Lonceng Melayang di pojok kanan bawah bagi pengunjung yang belum berlangganan:

<script src="https://pushnotif.biz.id/sdk/pushnotif.js"></script>
<script>
  PushNotif.init({
    appId: "app_45fd19f5", // Ganti dengan App ID website Anda
    apiBase: "https://pushnotif.biz.id",
    autoPrompt: true,
    promptLabel: "Ikuti Info Kajian Terbaru"
  });
</script>

LANGKAH 3 — KIRIM NOTIFIKASI DARI BACKEND (REST API)

Integrasi Webhook / Backend Toko Online & Portal

Selain mengirim broadcast manual dari Dashboard, server backend Anda (Node.js, PHP, Python, Go, Laravel) dapat mengirim push notification otomatis menggunakan Secret API Key:

curl -X POST https://pushnotif.biz.id/api/v1/notifications \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer pn_live_API_KEY_ANDA" \
  -d '{
    "app_id": "app_45fd19f5",
    "title": "Jadwal Kajian Ba'da Maghrib Malam Ini",
    "body": "Bersama Ustadz di Masjid Agung. Klik untuk melihat lokasi & materi.",
    "url": "https://daftarkajian.web.id/jadwal-hari-ini"
  }'

MULTI-FORMAT & MULTI-BAHASA

Kompatibel dengan Berbagai Format Payload & Bahasa Pemrograman

Endpoint POST /api/v1/notifications mendukung 5 format payload sekaligus (Standar JSON, OneSignal JSON, Firebase FCM JSON, Form URL-Encoded untuk PHP/WordPress, serta Query Parameters untuk Webhook n8n/Zapier):

A. Node.js / Next.js / TypeScript (Fetch)

await fetch("https://pushnotif.biz.id/api/v1/notifications", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer pn_live_API_KEY_ANDA"
  },
  body: JSON.stringify({
    app_id: "app_45fd19f5",
    title: "Pesanan #INV-992 Dikirim!",
    body: "Kurir sedang menuju lokasi Anda.",
    url: "https://tokoanda.com/orders/992"
  })
});

B. PHP / Laravel / WordPress WooCommerce (Form atau JSON)

$ch = curl_init("https://pushnotif.biz.id/api/v1/notifications");
curl_setopt($ch, CURLOPT_HTTPHEADER, ["X-API-Key: pn_live_API_KEY_ANDA"]);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([
    "app_id"  => "app_45fd19f5",
    "title"   => "Pembayaran Diterima!",
    "message" => "Terima kasih, paket Anda sedang disiapkan.",
    "link"    => "https://tokoanda.com/pesanan"
]));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);

C. Migrasi Instan dari OneSignal (Tanpa Ubah Struktur JSON!)

# 1. URL LAMA ONESIGNAL (Ganti baris ini saja):
# ❌ POST https://onesignal.com/api/v1/notifications
# ❌ POST https://api.onesignal.com/notifications

# 2. URL BARU PUSHNOTIF (Path /api/v1/notifications SAMA PERSIS!):
# ✅ POST https://pushnotif.biz.id/api/v1/notifications

curl -X POST https://pushnotif.biz.id/api/v1/notifications \
  -H "Content-Type: application/json" \
  -H "Authorization: Basic pn_live_API_KEY_ANDA" \
  -d '{
    "app_id": "app_45fd19f5",
    "headings": { "en": "Promo Akhir Bulan!", "id": "Promo Akhir Bulan!" },
    "contents": { "en": "Diskon 40% khusus hari ini.", "id": "Diskon 40% khusus hari ini." },
    "url": "https://tokoanda.com/promo"
  }'