Ringkasan notifikasi push

Ringkasan tentang definisi notifikasi push, alasan Anda menggunakannya, dan cara kerjanya.

Kayce Basques

Apa itu notifikasi push?

Pesan push memungkinkan Anda menyampaikan informasi kepada pengguna bahkan saat mereka tidak menggunakan situs Anda. Metode ini disebut push pesan karena Anda bisa "push" informasi kepada pengguna Anda bahkan ketika mereka tidak aktif. Bandingkan Push teknologi dengan Pull teknologi untuk memahami hal ini. konsep lebih lanjut.

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

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

Pesan dan notifikasi push adalah dua teknologi yang terpisah tetapi saling melengkapi. {i>Push<i} adalah teknologi untuk mengirim pesan dari server Anda kepada pengguna bahkan ketika mereka tidak aktif menggunakan {i>website<i} Anda. Notifikasi adalah teknologi untuk yang menampilkan informasi yang dikirim di perangkat pengguna. Sangat mungkin untuk menggunakan notifikasi tanpa pesan push. Suatu hari nanti mungkin saja untuk menggunakan pesan push tanpa notifikasi yang ditampilkan kepada pengguna (push senyap) tetapi browser melarang hal itu. Dalam praktiknya mereka biasanya digunakan bersama. Pengguna non-teknis mungkin tidak akan memahami perbedaan antara {i>push<i} pesan dan notifikasi. Dalam koleksi ini saat yang kami maksud adalah notifikasi push yang kami maksud adalah kombinasi pengiriman pesan diikuti dengan menampilkannya sebagai notifikasi. Saat kami mengucapkan pesan push kita maksudnya mendorong teknologi itu sendiri. Dan saat kami mengucapkan notifikasi kami mengacu pada teknologi notifikasi itu sendiri.

Mengapa menggunakan notifikasi push?

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

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 untuk mengirim notifikasi push, dan kemudian mengirim informasi pengenal klien ke server Anda untuk disimpan dalam {i>database<i}.
  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 akan menjelaskan langkah-langkah ini secara lebih detail.

Mendapatkan izin untuk mengirim notifikasi push

Pertama, situs Anda perlu mendapatkan izin pengguna untuk mengirim notifikasi push. Pemicu ini harus dipicu oleh gestur pengguna, seperti mengklik tombol Yes di samping perintah Do you want to receive push notifications?. Setelah konfirmasi itu, panggil Notification.requestPermission(). Sistem operasi atau di perangkat pengguna, mungkin akan menyajikan semacam UI untuk mengkonfirmasi secara resmi bahwa pengguna ingin memilih untuk menerima notifikasi push. UI ini bervariasi di berbagai platform.

Membuat klien berlangganan notifikasi push

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

Mengasumsikan bahwa langganan berhasil, browser mengembalikan PushSubscription . Anda harus menyimpan data ini dalam jangka panjang. Biasanya ini dilakukan dengan mengirimkan informasi ke server yang Anda kontrol, dan kemudian meminta server menyimpannya dalam database.

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

Mengirim pesan push

Server Anda tidak benar-benar mengirim pesan {i>push<i} langsung ke klien. J layanan push dapat melakukannya. Layanan push adalah layanan web yang dikendalikan oleh vendor browser pengguna. Saat Anda ingin mengirim notifikasi push ke klien yang diperlukan untuk membuat permintaan layanan web ke layanan push. Layanan web yang meminta yang yang Anda kirim ke layanan push dikenal sebagai permintaan protokol web push. Tujuan permintaan protokol web push harus mencakup:

  • Data yang akan disertakan dalam pesan.
  • Klien yang akan dikirimi pesan.
  • Petunjuk tentang cara layanan push menyampaikan pesan. Sebagai contoh, Anda dapat menentukan bahwa layanan push harus berhenti mencoba mengirim pesan setelah 10 menit.

Biasanya Anda membuat permintaan protokol {i>web push<i} melalui server yang Anda kontrol. Tentu saja, server Anda tidak perlu membuat permintaan layanan web mentah itu sendiri. Ada {i>library<i} yang bisa menanganinya untuk Anda, seperti web-push-libs. Tetapi mekanisme yang mendasarinya adalah membuat permintaan layanan web melalui HTTP.

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

Layanan push menerima permintaan Anda, mengautentikasinya, dan merutekan push tersebut ke klien yang sesuai. Jika browser klien sedang {i>offline<i}, {i>push<i} mengantrekan pesan {i>push<i} hingga {i>browser<i} online.

Setiap browser menggunakan layanan {i>push<i} apa pun yang diinginkan. Anda sebagai developer situs tidak memiliki kendali atas hal itu. Ini bukan masalah karena protokol web push distandarisasi. Dengan kata lain, Anda tidak perlu memikirkan layanan {i>push<i} mana yang dimiliki vendor {i>browser<i} gunakan. Anda hanya perlu memastikan bahwa permintaan protokol web push Anda mengikuti spesifikasi. Di antara hal-hal lainnya, spesifikasi menyatakan bahwa permintaan harus menyertakan header tertentu dan data harus dikirim sebagai aliran byte.

Namun, Anda perlu memastikan bahwa Anda mengirimkan protokol web push ke layanan push yang benar. Data PushSubscription yang yang dikembalikan oleh browser kepada Anda selama proses langganan, tidak akurat atau tidak sesuai. Objek PushSubscription akan 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 dari endpoint adalah informasi ID klien yang membantu layanan push menentukan ke klien mana pesan akan dikirim dengan tepat.

keys digunakan untuk enkripsi, yang akan dijelaskan selanjutnya.

Mengenkripsi pesan push

Data yang Anda kirim ke layanan push harus dienkripsi. Hal ini mencegah layanan {i>push<i} agar tidak dapat melihat data yang Anda kirim ke klien. Ingat bahwa vendor browser memutuskan layanan {i>push<i} apa yang akan digunakan, dan itu layanan push secara teoritis bisa menjadi tidak aman atau tidak aman. Server Anda harus menggunakan keys yang disediakan di PushSubscription untuk mengenkripsi protokol web pushnya permintaan.

Menandatangani permintaan protokol push web

Layanan push menyediakan cara untuk mencegah orang lain mengirim pesan ke pelanggan. Secara teknis Anda tidak harus melakukan ini, tetapi implementasinya yang paling mudah di Chrome memerlukannya. Setelan ini opsional di Firefox. Browser lain mungkin memerlukannya di masa mendatang.

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

  • Anda membuat kunci pribadi dan publik sebagai tugas satu kali. Kombinasi dari kunci pribadi dan publik dikenal sebagai kunci server aplikasi. Anda mungkin juga melihatnya bernama VAPID . VAPID adalah spesifikasi yang menentukan proses otentikasi.
  • Saat Anda membuat klien berlangganan notifikasi push dari kode JavaScript Anda, Anda memberikan kunci publik Anda. Saat layanan push menghasilkan endpoint untuk perangkat, maka mengaitkan kunci publik yang diberikan dengan endpoint.
  • Saat Anda mengirim permintaan protokol web push, Anda menandatangani beberapa informasi JSON dengan kunci pribadi Anda.
  • Ketika menerima permintaan protokol {i>web push<i} Anda, layanan {i>push<i} akan menggunakan kunci publik untuk mengotentikasi informasi yang ditandatangani. Jika tanda tangan valid layanan {i>push<i} tahu bahwa permintaan berasal dari server dengan kunci pribadi yang cocok.

Menyesuaikan pengiriman pesan push

Spesifikasi permintaan protokol {i>web push<i} juga menentukan parameter yang memungkinkan Anda menyesuaikan bagaimana layanan {i>push<i} mencoba mengirim pesan {i>push<i} 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 daya tahan 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 {i>web push<i} ke layanan {i>push<i}, layanan {i>push<i} menyimpan permintaan Anda diantrekan hingga salah satu peristiwa berikut terjadi:

  1. Klien online dan layanan {i>push<i} mengirimkan pesan {i>push<i}.
  2. Pesan akan kedaluwarsa.

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

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

Langkah berikutnya

Lab kode