Push Messaging atau Web Push Notification adalah salah satu fitur paling penting dalam Progressive Web App (PWA) modern. Fitur ini memungkinkan aplikasi web mengirimkan pesan ke pengguna meskipun website sedang tidak dibuka, bahkan ketika tab browser sudah ditutup.

Dalam konteks aplikasi seperti booking, order masuk, e-commerce, atau layanan real-time, push notification sering menjadi pengganti WhatsApp broadcast karena lebih stabil, tidak dibatasi platform pihak ketiga, dan bisa dikendalikan penuh oleh developer.

Artikel ini membahas secara lengkap cara kerja, arsitektur, komponen, implementasi, hingga best practice Push Messaging dalam PWA berbasis Node.js dan Service Worker.

---

1. Apa itu Push Messaging?

Push Messaging adalah sistem komunikasi server ke client yang memungkinkan server mengirimkan data ke browser pengguna tanpa harus ada koneksi aktif dari user ke server saat itu.

Berbeda dengan request HTTP biasa, push bersifat asynchronous dan event-driven.

Contoh sederhana:

• User install PWA
• User klik “Allow Notification”
• Server menyimpan subscription
• Server bisa kirim pesan kapan saja
• Browser menampilkan notifikasi

---

2. Perbedaan Push Messaging dan Notification

Banyak developer pemula menganggap Push Notification dan Notification API itu sama, padahal berbeda.

🔔 Notification API

• Dibuat dari frontend JavaScript
• Contoh: new Notification("Hello")
• Hanya jalan jika website masih terbuka
• Tidak bisa dikirim dari server

📡 Push Messaging (Web Push)

• Dikirim dari server (Node.js / backend)
• Tetap masuk walau browser ditutup
• Menggunakan Service Worker
• Lebih seperti “SMS dari server”

---

3. Arsitektur Push Notification di PWA

Sistem push terdiri dari beberapa komponen penting:

1. Client (Browser User)

• Meminta permission
• Membuat subscription
• Menyimpan endpoint

2. Service Worker

• Background script
• Menerima push event
• Menampilkan notifikasi

3. Application Server (Node.js)

• Menyimpan subscription
• Mengirim push message
• Menggunakan Web Push protocol

4. Push Service (Google/Browser)

• Perantara antara server dan device
• Contoh: FCM (Firebase Cloud Messaging)

---

4. Flow Push Notification

Berikut alur lengkap sistem push:

User membuka website
        ↓
Muncul permission request
        ↓
User klik "Allow"
        ↓
Browser membuat subscription
        ↓
Subscription dikirim ke server Node.js
        ↓
Server menyimpan ke database
        ↓
Server mengirim push kapan saja
        ↓
Push Service mengirim ke browser
        ↓
Service Worker menerima event
        ↓
Notifikasi muncul di device

---

5. Teknologi yang digunakan

Untuk membuat push messaging, kita butuh:

Frontend

• Service Worker
• Push API
• Notification API
• JavaScript (PWA logic)

Backend

• Node.js (umum)
• library web-push
• VAPID keys

Optional

• Redis (queue system)
• Database (MySQL / MongoDB)

---

6. Cara Kerja Subscription

Saat user klik “Allow”, browser akan membuat object subscription seperti ini:

{
  "endpoint": "https://fcm.googleapis.com/...",
  "keys": {
    "p256dh": "...",
    "auth": "..."
  }
}

Data ini sangat penting karena:

• Menjadi alamat tujuan push
• Disimpan di server
• Digunakan untuk kirim notifikasi

---

7. Contoh Implementasi Frontend (PWA)

Register Service Worker

navigator.serviceWorker.register('/sw.js');

Request Permission

Notification.requestPermission().then(permission => {
  if (permission === "granted") {
    console.log("Permission granted");
  }
});

Subscribe Push

const subscription = await reg.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: "VAPID_PUBLIC_KEY"
});

Kirim ke Server

fetch('/push/sub', {
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(subscription)
});

---

8. Service Worker (sw.js)

Service Worker adalah jantung push messaging.

self.addEventListener('push', function(event) {
  const data = event.data.json();  const options = {
    body: data.body,
    icon: '/icon.png',
    data: {
      url: data.url
    }
  };  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

---

9. Backend Node.js (Push Server)

Install library

npm install web-push

Setup VAPID

const webpush = require('web-push');webpush.setVapidDetails(
  'mailto:admin@example.com',
  PUBLIC_KEY,
  PRIVATE_KEY
);

Kirim Push

const payload = JSON.stringify({
  title: "Order baru",
  body: "Ada booking masuk",
  url: "/order"
});webpush.sendNotification(subscription, payload);

---

Kenapa Push Messaging lebih baik dari WhatsApp API?

WhatsApp API:

• Bisa kena blok
• Ada rate limit
• Bergantung pihak ketiga
• Biaya per pesan

Push Messaging:

• Tidak ada biaya per pesan
• Tidak ada limit ketat
• Full kontrol server
• Lebih cepat

---

11. Kelebihan Push Notification di PWA

✔ Bisa masuk walau app ditutup
✔ Tidak tergantung aplikasi pihak ketiga
✔ Real-time delivery
✔ Bisa segmentasi user
✔ Bisa personalisasi pesan

---

12. Kekurangan Push Messaging

❌ Harus user klik “Allow”
❌ Tidak semua user mau izin
❌ Tergantung browser support
❌ Tidak bisa 100% background seperti native Android

---

Best Practice Production

1. Gunakan cooldown UX

Jangan spam permission popup.

2. Gunakan queue system

Untuk kirim ribuan push:

• Redis Queue
• BullMQ

3. Cleanup subscription invalid

Jika user uninstall:

• hapus dari database

4. Gunakan cluster server

Seperti PM2:

pm2 start server.js -i max

5. Gunakan payload ringan

Jangan kirim data besar.

---

Use Case Real

Push messaging cocok untuk:

• Booking system
• Order masuk (seperti kamu punya)
• Chat notification
• Promo e-commerce
• Reminder system
• Tracking update

---

Contoh Implementasi Sistem Kamu

Dari kode yang kamu buat sebelumnya, kamu sudah punya:

✔ PWA frontend
✔ Service Worker
✔ Push subscription
✔ Node.js backend
✔ PM2 cluster

👉 Artinya kamu sudah di level production-ready system

---

Skalabilitas (Saat User Banyak)

Kalau user sudah ribuan:

• Gunakan PM2 cluster (2 core atau max)
• Gunakan Redis queue
• Pisahkan service push
• Monitoring log error

---

Kesimpulan

Push Messaging adalah teknologi penting dalam PWA modern yang memungkinkan aplikasi mengirim notifikasi real-time tanpa bergantung pada aplikasi pihak ketiga seperti WhatsApp.

Dengan kombinasi:

• Service Worker
• Push API
• Node.js Web Push
• PM2 cluster

Kamu bisa membuat sistem notifikasi yang:

• cepat
• stabil
• scalable
• bebas biaya per pesan

---

🚀 Penutup

Untuk kasus kamu (booking + order masuk), kamu sudah berada di jalur yang benar. Sistem yang kamu bangun sekarang sudah setara dengan arsitektur notifikasi aplikasi besar, hanya tinggal optimasi scaling dan queue jika traffic meningkat.