Ringkasan notifikasi push

Ringkasan tentang apa itu notifikasi push, alasan Anda mungkin menggunakannya, dan cara kerjanya.

Kayce Basques

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 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 bervariasi antar-platform:

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 kepada pengguna meskipun mereka tidak aktif menggunakan situs Anda. Notifikasi adalah teknologi untuk menampilkan informasi yang dikirimkan di perangkat pengguna. Anda dapat menggunakan notifikasi tanpa pesan push. Suatu hari nanti, 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. Pengguna non-teknis mungkin tidak akan memahami perbedaan antara pesan push dan notifikasi. Dalam koleksi ini, saat kita mengatakan notifikasi push, yang dimaksud adalah kombinasi pengiriman pesan yang diikuti dengan menampilkannya sebagai notifikasi. Saat kami mengatakan pesan push, kami mengacu pada teknologi push itu sendiri. Selain itu, saat kami mengatakan notifikasi, kami merujuk pada 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?

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

  1. Menambahkan logika klien untuk meminta izin pengguna guna 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 harus mendapatkan izin pengguna untuk mengirim notifikasi push. Tindakan ini harus dipicu oleh gestur pengguna, seperti mengklik tombol Yes 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 semacam UI untuk mengonfirmasi secara resmi bahwa pengguna ingin mengaktifkan notifikasi push. UI ini bervariasi di berbagai platform.

Mendapatkan klien untuk berlangganan notifikasi push

Setelah mendapatkan izin, situs Anda harus memulai proses pendaftaran pengguna ke 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 dikenal sebagai 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 dalam jangka panjang. Biasanya hal ini dilakukan dengan mengirimkan informasi ke server yang Anda kontrol, lalu meminta server menyimpannya dalam database.

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

Mengirim pesan push

Server Anda sebenarnya tidak mengirim pesan push langsung ke klien. Layanan push melakukannya. Layanan push adalah layanan web yang dikontrol oleh vendor browser pengguna Anda. 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 web push. Permintaan protokol push web harus menyertakan:

  • Data yang akan disertakan dalam pesan.
  • Klien yang akan menerima pesan.
  • Petunjuk tentang cara layanan push 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 perlu 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, mengautentikannya, dan merutekan pesan push ke klien yang sesuai. Jika browser klien offline, layanan push akan mengantrekan pesan push hingga browser online.

Setiap browser menggunakan layanan push apa pun yang diinginkan. Anda sebagai developer situs tidak dapat mengontrolnya. Hal ini bukan masalah karena permintaan protokol push web diseragamkan. Dengan kata lain, Anda tidak perlu memperhatikan layanan push mana yang digunakan vendor browser. Anda hanya perlu memastikan bahwa permintaan protokol push web Anda mengikuti spesifikasi. Selain itu, spesifikasi menyatakan bahwa permintaan harus menyertakan header tertentu dan data harus dikirim sebagai aliran byte.

Namun, Anda harus memastikan bahwa Anda mengirimkan permintaan protokol push web ke layanan push yang benar. Data PushSubscription yang dikembalikan 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 klien mana yang akan menerima pesan.

keys digunakan untuk enkripsi, yang dijelaskan berikutnya.

Mengenkripsi pesan push

Data yang Anda kirim ke layanan push harus dienkripsi. Tindakan ini mencegah layanan push agar tidak dapat melihat data yang Anda kirim ke klien. Ingat bahwa vendor browser memutuskan layanan push yang akan digunakan, dan layanan push tersebut secara teoritis dapat tidak aman atau tidak aman. Server Anda harus menggunakan keys yang disediakan di PushSubscription untuk mengenkripsi permintaan protokol push webnya.

Menandatangani permintaan protokol web push

Layanan push menyediakan cara untuk mencegah orang lain mengirim pesan kepada pengguna Anda. Secara teknis, Anda tidak perlu melakukannya, tetapi penerapan yang paling mudah di Chrome memerlukannya. Fitur ini bersifat 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 secara kasar bekerja seperti ini:

  • Anda membuat 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 spec yang menentukan proses autentikasi ini.
  • Saat Anda membuat klien berlangganan notifikasi push dari kode JavaScript, Anda harus memberikan kunci publik. Saat layanan push membuat endpoint untuk perangkat, layanan tersebut akan mengaitkan kunci publik yang diberikan dengan endpoint.
  • Saat mengirim permintaan protokol push web, Anda menandatangani beberapa informasi JSON dengan kunci pribadi Anda.
  • 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 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:

  • Time-To-Live (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 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 mengirim permintaan protokol push web ke layanan push, layanan push akan terus mengantrekan permintaan Anda hingga salah satu peristiwa berikut terjadi:

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

Saat menerima pesan push, browser klien akan mendekripsi data pesan push dan mengirimkan peristiwa push ke service worker 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.

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

Langkah berikutnya

Codelab