Ringkasan notifikasi push

Ringkasan tentang apa yang dimaksud dengan notifikasi push, alasan Anda mungkin menggunakannya, dan cara kerjanya.

Kayce Basques
Kayce Basques
X GitHub
Matt Gaunt
X Beranda

Apa yang dimaksud dengan notifikasi push?

Pesan push memungkinkan Anda menyampaikan informasi kepada pengguna meskipun mereka tidak menggunakan situs Anda. Pesan ini disebut pesan push karena Anda dapat "mendorong" informasi kepada pengguna meskipun mereka tidak aktif. Bandingkan teknologi Push dengan teknologi Pull untuk memahami konsep ini lebih lanjut.

Notifikasi menampilkan informasi dalam jumlah kecil kepada pengguna. Situs dapat menggunakan notifikasi untuk memberi tahu pengguna tentang peristiwa penting yang sensitif terhadap waktu, atau tindakan yang perlu dilakukan pengguna. Tampilan dan nuansa notifikasi bervariasi antarplatform:

Contoh notifikasi di macOS dan Android.
Contoh notifikasi di macOS dan Android.

Pesan push dan notifikasi adalah dua teknologi terpisah tetapi saling melengkapi. Push adalah teknologi untuk mengirim pesan dari server Anda ke pengguna meskipun mereka tidak aktif menggunakan situs Anda. Notifikasi adalah teknologi untuk menampilkan informasi yang di-push di perangkat pengguna. Anda dapat menggunakan notifikasi tanpa pesan push. Suatu hari, Anda mungkin juga dapat menggunakan pesan push tanpa notifikasi yang ditampilkan kepada pengguna (push senyap), tetapi browser saat ini tidak mengizinkannya. Dalam praktiknya, keduanya biasanya digunakan bersama-sama. Pengguna non-teknis mungkin tidak memahami perbedaan antara pesan push dan notifikasi. Dalam koleksi ini, saat kami mengatakan notifikasi push , yang kami maksud adalah kombinasi dari mendorong pesan, lalu menampilkannya sebagai notifikasi. Saat kami mengatakan pesan push , yang kami maksud adalah teknologi push itu sendiri. Dan saat kami mengatakan notifikasi , yang kami maksud adalah teknologi notifikasi itu sendiri.

Alasan menggunakan notifikasi push

  • Bagi pengguna, notifikasi push adalah cara untuk menerima informasi yang tepat waktu, relevan, dan akurat.
  • Bagi Anda (pemilik situs), notifikasi push adalah cara untuk meningkatkan engagement pengguna.

Cara kerja notifikasi push

Secara umum, langkah-langkah utama untuk menerapkan notifikasi push adalah:

  1. Menambahkan logika klien untuk meminta izin pengguna untuk mengirim notifikasi push, lalu mengirim informasi ID klien ke server Anda untuk disimpan dalam database.
  2. Menambahkan logika server untuk mengirim pesan push ke perangkat klien.
  3. Menambahkan logika klien untuk menerima pesan yang telah di-push ke perangkat dan menampilkannya sebagai notifikasi.

Bagian selanjutnya dari halaman ini menjelaskan langkah-langkah ini secara lebih mendetail.

Mendapatkan izin untuk mengirim notifikasi push

Pertama, situs Anda harus mendapatkan izin pengguna untuk mengirim notifikasi push. Hal ini harus dipicu oleh gestur pengguna, seperti mengklik tombol Ya di samping perintah Do you want to receive push notifications?. Setelah konfirmasi tersebut, panggil Notification.requestPermission(). Sistem operasi atau browser di perangkat pengguna mungkin akan menampilkan beberapa jenis UI untuk mengonfirmasi secara resmi bahwa pengguna ingin ikut serta dalam notifikasi push. UI ini bervariasi di berbagai platform.

Berlangganan notifikasi push untuk klien

Setelah mendapatkan izin, situs Anda harus memulai proses berlangganan notifikasi push untuk pengguna. Hal ini dilakukan melalui JavaScript, menggunakan Push API. Anda harus memberikan kunci autentikasi publik selama proses berlangganan, yang akan Anda pelajari lebih lanjut nanti. Setelah Anda memulai proses berlangganan, browser akan membuat permintaan jaringan ke layanan web yang dikenal sebagai layanan push, yang juga akan Anda pelajari lebih lanjut nanti.

Dengan asumsi bahwa langganan berhasil, browser akan menampilkan a PushSubscription objek. Anda harus menyimpan data ini dalam jangka panjang. Biasanya, hal ini dilakukan dengan mengirimkan informasi ke server yang Anda kontrol, lalu meminta server menyimpannya dalam database.

1 Mendapatkan izin untuk mengirim pesan push. 2. Mendapatkan PushSubscription. 3. Kirim PushSubscription ke server Anda.

Mengirim pesan push

Server Anda sebenarnya tidak mengirim pesan push langsung ke klien. Layanan push yang melakukannya. Layanan push adalah layanan web yang dikontrol oleh vendor browser pengguna Anda. Jika ingin mengirim notifikasi push ke klien, Anda harus membuat permintaan layanan web ke layanan push. Permintaan layanan web yang Anda kirim ke layanan push dikenal sebagai permintaan protokol push web. Permintaan protokol push web harus mencakup:

  • Data yang akan disertakan dalam pesan.
  • Klien yang akan menerima pesan.
  • Petunjuk tentang cara layanan push harus mengirimkan pesan. Misalnya, Anda dapat menentukan bahwa layanan push harus berhenti mencoba mengirim pesan setelah 10 menit.

Biasanya, Anda membuat permintaan protokol push web melalui server yang Anda kontrol. Tentu saja, server Anda tidak harus membuat permintaan layanan web mentah itu sendiri. Ada library yang dapat menanganinya untuk Anda, seperti web-push-libs. Namun, mekanisme yang mendasarinya adalah permintaan layanan web melalui HTTP.

Server Anda mengirimkan permintaan protokol push web ke layanan push dan layanan push mengirimkan pesan ke perangkat pengguna.

Layanan push menerima permintaan Anda, mengautentikasinya, dan merutekan pesan push ke klien yang sesuai. Jika browser klien offline, layanan push akan mengantre pesan push hingga browser online.

Setiap browser menggunakan layanan push yang diinginkannya. Anda sebagai developer situs tidak memiliki kontrol atas hal tersebut. Hal ini tidak menjadi masalah karena permintaan protokol push web distandardisasi. Dengan kata lain, Anda tidak perlu memikirkan layanan push mana yang digunakan vendor browser. Anda hanya perlu memastikan bahwa permintaan protokol push web Anda mengikuti spesifikasi. Selain hal lainnya, spesifikasi menyatakan bahwa permintaan harus menyertakan header tertentu dan data harus dikirim sebagai aliran byte.

Namun, Anda harus memastikan bahwa Anda mengirim permintaan protokol push web ke layanan push yang benar. Data PushSubscription yang ditampilkan browser kepada Anda selama proses berlangganan memberikan informasi ini. Objek PushSubscription terlihat seperti ini:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

Domain endpoint pada dasarnya adalah layanan push. Jalur endpoint adalah informasi ID klien yang membantu layanan push menentukan klien mana yang akan menerima pesan push.

keys digunakan untuk enkripsi, yang akan dijelaskan berikutnya.

Mengenkripsi pesan push

Data yang Anda kirim ke layanan push harus dienkripsi. Hal ini mencegah layanan push dapat melihat data yang Anda kirim ke klien. Ingatlah bahwa vendor browser memutuskan layanan push yang akan digunakan, dan layanan push tersebut secara teoretis dapat tidak aman atau tidak terlindungi. Server Anda harus menggunakan keys yang disediakan di PushSubscription untuk mengenkripsi permintaan protokol push web-nya.

Menandatangani permintaan protokol push web

Layanan push menyediakan cara untuk mencegah orang lain mengirim pesan kepada pengguna Anda. Secara teknis, Anda tidak harus melakukannya, tetapi penerapan termudah di Chrome memerlukannya. Hal ini bersifat opsional di Firefox. Browser lain mungkin akan memerlukannya di masa mendatang.

Alur kerja ini melibatkan kunci pribadi dan kunci publik yang unik untuk aplikasi Anda. Proses autentikasi secara kasar berfungsi seperti ini:

  • Anda membuat kunci pribadi dan kunci publik sebagai tugas satu kali. Kombinasi kunci pribadi dan kunci publik dikenal sebagai kunci server aplikasi. Anda mungkin juga melihatnya disebut kunci VAPID. VAPID adalah spesifikasi yang menentukan proses autentikasi ini.
  • Saat Anda berlangganan notifikasi push untuk klien dari kode JavaScript, Anda akan memberikan kunci publik. Saat layanan push membuat endpoint untuk perangkat, layanan tersebut akan mengaitkan kunci publik yang diberikan dengan endpoint.
  • Saat Anda mengirim permintaan protokol push web, Anda akan menandatangani beberapa informasi JSON dengan kunci pribadi.
  • Saat menerima permintaan protokol push web, layanan push akan menggunakan kunci publik yang disimpan untuk mengautentikasi informasi yang ditandatangani. Jika tanda tangan valid, layanan push akan mengetahui bahwa permintaan tersebut berasal dari server dengan kunci pribadi yang cocok.

Menyesuaikan pengiriman pesan push

Spesifikasi permintaan protokol push web juga menentukan parameter yang memungkinkan Anda menyesuaikan cara layanan push mencoba mengirim pesan push ke klien. Misalnya, Anda dapat menyesuaikan:

  • Waktu aktif (TTL) pesan, yang menentukan berapa lama layanan push harus mencoba mengirim pesan.
  • Urgensi pesan, yang berguna jika layanan push menghemat masa pakai baterai klien dengan hanya mengirim pesan prioritas tinggi.
  • Topik pesan, yang menggantikan pesan tertunda dengan topik yang sama dengan pesan terbaru.

Menerima dan menampilkan pesan yang di-push sebagai notifikasi

Setelah Anda mengirim permintaan protokol push web ke layanan push, layanan push akan terus mengantre permintaan Anda hingga salah satu peristiwa berikut terjadi:

  1. Klien online dan layanan push mengirim pesan push.
  2. Masa berlaku pesan berakhir.

Saat browser klien menerima pesan yang di-push, browser tersebut akan mendekripsi data pesan push dan mengirimkan peristiwa push ke pekerja layanan Anda. Service worker pada dasarnya adalah kode JavaScript yang dapat berjalan di latar belakang, meskipun situs Anda tidak terbuka atau browser ditutup. Di pengendali peristiwa push pekerja layanan, Anda memanggil ServiceWorkerRegistration.showNotification() untuk menampilkan informasi sebagai notifikasi.

1. Pesan tiba di perangkat. 2. Browser mengaktifkan service worker. 3. Peristiwa push dikirim.

Langkah berikutnya

Codelab