Cara kerja push

Sebelum membahas API, mari kita lihat push dari level tinggi, dari awal hingga akhir. Kemudian saat kita mempelajari topik individu atau API nanti, Anda akan memiliki pemahaman tentang bagaimana dan mengapa sangatlah penting.

Tiga langkah utama untuk mengimplementasikan push adalah:

  1. Menambahkan logika sisi klien untuk membuat pengguna berlangganan push (yaitu JavaScript dan UI di aplikasi web yang mendaftarkan pengguna untuk mengirim pesan).
  2. Panggilan API dari back-end / aplikasi Anda yang memicu pesan push ke perangkat pengguna.
  3. File JavaScript pekerja layanan yang akan menerima "peristiwa push" saat push masuk pada perangkat. Di JavaScript inilah Anda dapat menampilkan notifikasi.

Mari kita lihat apa yang tercakup dalam setiap langkah ini secara lebih mendetail.

Langkah 1: Sisi Klien

Langkah pertama adalah "subscribe" pengguna untuk mengirim pesan.

Berlangganan pengguna memerlukan dua hal. Pertama, mendapatkan izin dari pengguna untuk mengirim mereka mengirimkan pesan push. Kedua, mendapatkan PushSubscription dari browser.

PushSubscription berisi semua informasi yang kita butuhkan untuk mengirim pesan push ke pengguna tersebut. Anda bisa "seperti" anggaplah ini sebagai ID untuk perangkat pengguna tersebut.

Ini semua dilakukan di JavaScript dengan Push API.

Dukungan Browser

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Sumber

Sebelum membuat pengguna berlangganan{i>,<i} Anda harus membuat serangkaian "kunci server aplikasi", yang akan kita bahas nanti.

Kunci server aplikasi, yang juga dikenal sebagai kunci VAPID, bersifat unik untuk server Anda. Keduanya memungkinkan layanan push untuk mengetahui server aplikasi mana yang membuat pengguna berlangganan dan memastikan bahwa server tersebut sama server yang memicu pesan {i>push<i} ke pengguna tersebut.

Setelah membuat pengguna berlangganan dan memiliki PushSubscription, Anda harus mengirimkan PushSubscription detail ke backend / server Anda. Di server, Anda akan menyimpan ini berlangganan ke {i>database<i} dan menggunakannya untuk mengirim pesan {i>push<i} ke pengguna tersebut.

Pastikan Anda mengirimkan PushSubscription ke backend Anda.

Langkah 2: Kirim pesan push

Jika ingin mengirim pesan push kepada pengguna, Anda perlu melakukan panggilan API ke push layanan. Panggilan API ini akan mencakup data apa yang akan dikirim, kepada siapa pesan akan dikirim, dan kriteria tentang cara mengirim pesan. Biasanya panggilan API ini dilakukan dari server Anda.

Beberapa pertanyaan yang mungkin Anda tanyakan pada diri sendiri:

  • Siapa dan apa yang dimaksud dengan layanan push?
  • Seperti apa tampilan API-nya? Apakah JSON, XML, atau yang lain?
  • Apa yang dapat dilakukan API ini?

Siapa dan apa yang dimaksud dengan layanan push?

Layanan push menerima permintaan jaringan, memvalidasinya, dan mengirimkan pesan push ke browser yang sesuai. Jika browser sedang offline, pesan akan dimasukkan ke dalam antrean sampai browser kembali online.

Setiap browser bisa menggunakan layanan push apa pun yang mereka inginkan, itu tidak dapat dikontrol oleh developer berakhir. Hal ini bukan masalah karena setiap layanan push mengharapkan panggilan API yang sama. Arti Anda tidak perlu peduli siapa layanan {i>push<i} itu. Anda hanya perlu memastikan bahwa panggilan API valid.

Untuk mendapatkan URL yang tepat guna memicu pesan push (yaitu URL untuk layanan push), Anda hanya perlu melihat nilai endpoint dalam PushSubscription.

Di bawah ini adalah contoh nilai yang akan Anda dapatkan dari PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

Endpoint dalam kasus ini adalah [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. Layanan {i>push<i} akan menjadi 'layanan-push-acak.com' dan setiap endpoint bersifat unik untuk pengguna, yang ditunjukkan dengan &#39;some-kind-of-unique-id-1234&#39;. Saat Anda mulai bekerja dengan {i>push<i}, Anda akan melihat pola ini.

Kunci dalam langganan akan dibahas nanti.

Seperti apa tampilan API-nya?

Saya telah menyebutkan bahwa setiap layanan push web mengharapkan panggilan API yang sama. API tersebut adalah Protokol Push Web. Ini adalah standar IETF yang menentukan cara Anda melakukan panggilan API ke layanan push.

Panggilan API mengharuskan header tertentu disetel dan data harus berupa aliran byte. Kita akan melihat library yang dapat melakukan panggilan API ini untuk kita serta cara melakukannya sendiri.

Apa yang dapat dilakukan API ini?

API menyediakan cara untuk mengirim pesan kepada pengguna, dengan / tanpa data, dan menyediakan petunjuk cara mengirim pesan.

Data yang Anda kirim dengan pesan push harus dienkripsi. Alasannya adalah karena mencegah layanan push, bisa siapa saja, agar tidak dapat melihat data yang dikirim dengan pesan push. Hal ini penting mengingat bahwa browserlah yang memutuskan layanan push mana yang digunakan, yang dapat membuka pintu ke {i>browser<i} menggunakan layanan {i>push<i} yang tidak aman atau tidak aman.

Bila Anda memicu pesan push, layanan push akan menerima panggilan API dan mengantrekan untuk membuat pesan email baru. Pesan ini akan tetap diantrekan sampai perangkat pengguna online dan push dapat mengirimkan pesan. Instruksi yang dapat Anda berikan ke layanan {i>push<i} menentukan cara pesan push dimasukkan ke dalam antrean.

Petunjuknya mencakup detail seperti:

  • Waktu aktif (time-to-live) untuk pesan push. Ini menentukan berapa lama pesan harus diantrekan sebelum data itu akan dihapus dan tidak terkirim.

  • Tentukan urgensi pesan. Hal ini berguna jika layanan push mempertahankan daya tahan baterai pengguna hanya dengan mengirimkan pesan berprioritas tinggi.

  • Memberikan "topik" ke pesan push yang akan menggantikan pesan yang tertunda dengan pesan baru ini.

Ketika server Anda ingin mengirim pesan push, server tersebut membuat permintaan protokol web push ke layanan push.

Langkah 3: Kirim peristiwa di perangkat pengguna

Setelah kita mengirim pesan push, layanan {i>push<i} akan menyimpan pesan Anda di servernya sampai salah satu peristiwa berikut terjadi:

  1. Perangkat akan online dan layanan push mengirimkan pesan.
  2. Pesan akan kedaluwarsa. Jika ini terjadi, layanan {i>push<i} menghapus pesan dari antrean dan pesan itu tidak akan pernah dikirimkan.

Ketika layanan push menyampaikan pesan, browser akan menerima pesan itu, mendekripsi semua pesan data dan mengirim peristiwa push di pekerja layanan Anda.

Pekerja layanan adalah "khusus" file JavaScript. Browser dapat menjalankan JavaScript ini tanpa membuat halaman Anda terbuka. Bahkan dapat menjalankan JavaScript ini ketika browser ditutup. Pekerja layanan juga memiliki API, seperti push, yang tidak tersedia di halaman web (yaitu, API yang tidak tersedia skrip pekerja layanan).

Error ini ada di dalam 'push' pekerja layanan memungkinkan Anda melakukan tugas latar belakang apa pun. Anda dapat melakukan panggilan analytics, meng-cache halaman secara offline, dan menampilkan notifikasi.

Saat pesan push dikirim dari layanan push ke perangkat pengguna, pekerja layanan Anda akan menerima peristiwa push.

Itulah keseluruhan alur untuk pengiriman pesan push.

Langkah berikutnya

Lab kode