Definisi

• Push API : API di browser untuk server kirim message ke client
• Notification API : API di browser untuk client kirim notification ke client

Push API

• Butuh
  • HTTPS
  • VAPID keys

Objek Browser Terkait

• Navigator - window.navigator
  • ServiceWorkerContainer - window.navigator.serviceWorker
  • ServiceWorkerRegistration
    • PushManager - ServiceWorkerRegistration.pushManager: Interface dari Push API. Ngelola push message dari server.
      • getSubscription()
      • subscribe()
    • PushSubscription

Tahapan

Sisi client

1. Registrasi service worker
2. Cek o. Subscription udah ada atau belum
   • Jika belum, ambil VAPID public key dari server
3. Bikin o. Subscription pake VAPID public key via pushManager
4. Kirim o. Subscription ke server, untuk dipake server kirim push message ke client

Sisi server

1. Buat VAPID public & private keys
2. Buat route http dimana client bisa minta VAPID public key
3. Buat route http dimana client bisa kirim info Subscription nya
4. Buat route http dimana client bisa minta hapus Subscription nya
5. Pake Subscription info untuk kirim push notifications ke subscriber

Catatan

• Push API
• Web socket dapat digunakan untuk push data ke client menggunakan Push API

Artikel Terkait

• Google - The Web Push Protocol
• Notifications, Server Side Events, Web Sockets (SocketIO), and Push API
• Push Backend - Gorush
• ProgrammableWeb - What Is a WebSockets Push-Styled API and How Does It Work?
• Google - Sending Messages with Web Push Libraries

Praktik

• How to make PWAs re-engageable using Notifications and Push
• Add push notifications to your web app with Node.js and service workers
• A 5-minute guide to Push notifications in Progressive Web Apps

• [React js PWA tutorial #12 push notification popup

  Progressive web app](https://www.youtube.com/watch?v=gvN3SA3CaWE)

push notification android browser notif