Ringkasan notifikasi push

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

Kayce Basques

Apa itu notifikasi push?

Dengan pesan push, Anda dapat menyampaikan informasi kepada pengguna meskipun mereka tidak sedang menggunakan situs Anda. Ini disebut pesan push karena Anda dapat "mengirim" informasi kepada pengguna meskipun mereka tidak aktif. Bandingkan Push teknologi dengan Teknologi Pull untuk memahami konsep ini lebih lanjut.

Notifikasi menyajikan potongan kecil informasi kepada pengguna. Situs dapat menggunakan notifikasi untuk memberi tahu pengguna tentang peristiwa penting yang mendesak, atau tindakan yang perlu dilakukan pengguna. Tampilan dan nuansa notifikasi berbeda-beda di setiap platform:

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

Pesan push dan notifikasi adalah dua teknologi yang terpisah tetapi saling melengkapi. Push adalah teknologi untuk mengirim pesan dari server Anda ke pengguna bahkan saat mereka tidak aktif menggunakan situs Anda. Notifikasi adalah teknologi untuk menampilkan informasi yang dikirim di perangkat pengguna. Anda dapat menggunakan notifikasi tanpa pengiriman pesan push. Suatu hari, Anda juga dapat menggunakan pesan push tanpa notifikasi yang ditampilkan kepada pengguna (push senyap), tetapi browser saat ini tidak mengizinkannya. Dalam praktiknya, keduanya biasanya digunakan bersamaan. Pengguna non-teknis mungkin tidak akan memahami perbedaan antara pesan push dan notifikasi. Dalam kumpulan ini, yang kami sebut notifikasi push adalah kombinasi pengiriman pesan yang diikuti dengan menampilkannya sebagai notifikasi. Yang dimaksud dengan pesan push adalah teknologi push itu sendiri. Dan saat kami mengatakan notifikasi adalah teknologi notifikasi itu sendiri.

Mengapa 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 interaksi pengguna.

Bagaimana cara kerja notifikasi push?

Pada tingkat tinggi, langkah-langkah utama untuk menerapkan notifikasi push adalah:

  1. Menambahkan logika klien untuk meminta izin kepada pengguna agar dapat mengirim notifikasi push, lalu mengirim informasi ID klien ke server Anda untuk disimpan dalam database.
  2. Menambahkan logika server untuk mengirim pesan ke perangkat klien.
  3. Menambahkan logika klien untuk menerima pesan yang telah dikirim 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 perlu mendapatkan izin pengguna untuk mengirimkan notifikasi push. Hal ini akan dipicu oleh gestur pengguna, seperti mengklik tombol Yes di samping prompt Do you want to receive push notifications?. Setelah konfirmasi, panggil Notification.requestPermission(). Sistem operasi atau browser pada perangkat pengguna mungkin akan menampilkan semacam UI untuk secara resmi mengonfirmasi bahwa pengguna ingin ikut serta dalam notifikasi push. UI ini bervariasi di berbagai platform.

Membuat klien berlangganan notifikasi push

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

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

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

Kirim pesan push

Server Anda tidak benar-benar mengirim pesan {i>push<i} langsung ke klien. Layanan push melakukan hal itu. Layanan push adalah layanan web yang dikontrol oleh vendor browser pengguna. Jika ingin mengirim notifikasi push ke klien, Anda perlu 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 mana yang akan dikirimi pesan.
  • Petunjuk tentang cara layanan push mengirimkan pesan. Misalnya, Anda dapat menentukan agar layanan push 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 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 mengirim pesan ke perangkat pengguna.

Layanan push menerima permintaan Anda, mengautentikasinya, dan mengarahkan pesan push ke klien yang sesuai. Jika browser klien sedang offline, layanan push akan mengantrekan pesan push hingga browser terhubung ke internet.

Setiap browser menggunakan layanan {i>push<i} apa pun yang diinginkannya. Anda sebagai pengembang {i>website<i} tidak memiliki kendali atas hal itu. Ini bukan masalah karena permintaan protokol web push distandarkan. Dengan kata lain, Anda tidak perlu memperhatikan layanan push mana yang digunakan vendor browser. Anda hanya perlu memastikan bahwa permintaan protokol push web mengikuti spesifikasi. Selain itu, spesifikasi tersebut menyatakan bahwa permintaan harus menyertakan header tertentu dan data harus dikirim sebagai aliran byte.

Namun, Anda perlu memastikan bahwa permintaan protokol push web dikirim ke layanan push yang benar. Data PushSubscription yang ditampilkan browser kepada Anda selama proses langganan 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 secara tepat ke klien mana pesan akan dikirim.

keys digunakan untuk enkripsi, yang akan dijelaskan selanjutnya.

Mengenkripsi pesan push

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

Menandatangani permintaan protokol push web

Layanan push menyediakan cara untuk mencegah orang lain mengirim pesan kepada pengguna Anda. Secara teknis, Anda tidak perlu melakukan hal ini, tetapi penerapan yang paling mudah di Chrome memerlukannya. Ini opsional di Firefox. Browser lain mungkin memerlukannya di masa mendatang.

Alur kerja ini melibatkan kunci pribadi dan kunci publik yang unik untuk aplikasi Anda. Proses autentikasi kurang lebih bekerja seperti ini:

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

Sesuaikan pengiriman pesan push

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

  • Time-To-Live (TTL) pesan, yang menentukan berapa lama layanan push harus mencoba mengirimkan pesan.
  • Urgensi pesan, yang berguna jika layanan push mempertahankan masa pakai baterai klien dengan hanya mengirimkan pesan berprioritas tinggi.
  • Topik pesan, yang menggantikan pesan tertunda dari topik yang sama dengan pesan terbaru.

Menerima dan menampilkan pesan yang dikirim sebagai notifikasi

Setelah Anda mengirimkan permintaan protokol push web ke layanan push, layanan push akan menyimpan permintaan Anda dalam antrean sampai salah satu peristiwa berikut terjadi:

  1. Klien kembali online dan layanan push mengirimkan pesan push.
  2. Masa berlaku pesan akan habis.

Saat menerima pesan yang dikirim, browser klien akan mendekripsi data pesan push dan mengirim peristiwa push ke pekerja layanan Anda. Pekerja layanan pada dasarnya adalah kode JavaScript yang dapat berjalan di latar belakang, bahkan saat situs tidak terbuka atau browser ditutup. Dalam pengendali peristiwa push pekerja layanan, Anda memanggil ServiceWorkerRegistration.showNotification() untuk menampilkan informasi sebagai notifikasi.

Pesan tiba di perangkat. Browser mengaktifkan pekerja layanan. Peristiwa push dikirim.

Langkah berikutnya

Lab kode