Cara kerja push

Sebelum membahas API, mari kita lihat push dari tingkat tinggi, dari awal hingga akhir. Kemudian, saat kita membahas topik individual atau API nanti, Anda akan memahami bagaimana dan mengapa hal itu penting.

Tiga langkah utama untuk menerapkan push adalah:

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

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

Langkah 1: Sisi Klien

Langkah pertama adalah "membuat pengguna berlangganan" pesan push.

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

PushSubscription berisi semua informasi yang diperlukan untuk mengirim pesan push kepada pengguna tersebut. Anda dapat "semacam" menganggapnya 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, Anda harus membuat kumpulan "kunci server aplikasi", yang akan kita bahas nanti.

Kunci server aplikasi, yang juga dikenal sebagai kunci VAPID, bersifat unik untuk server Anda. ID ini memungkinkan layanan push mengetahui server aplikasi mana yang berlangganan pengguna dan memastikan bahwa server tersebut sama dengan yang memicu pesan push ke pengguna tersebut.

Setelah membuat pengguna berlangganan dan memiliki PushSubscription, Anda harus mengirim detail PushSubscription ke backend/server. Di server, Anda akan menyimpan langganan ini ke database dan menggunakannya untuk mengirim pesan push kepada pengguna tersebut.

Pastikan Anda mengirim PushSubscription ke backend.

Langkah 2: Kirim pesan push

Jika ingin mengirim pesan push kepada pengguna, Anda harus melakukan panggilan API ke layanan push. Panggilan API ini akan mencakup data yang akan dikirim, kepada siapa pesan akan dikirim, dan kriteria apa pun 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? Apakah JSON, XML, atau yang lainnya?
  • 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 offline, pesan akan dimasukkan ke antrean hingga browser online.

Setiap browser bisa menggunakan layanan push apa pun yang mereka inginkan, ini adalah sesuatu yang tidak dapat dikontrol oleh developer. Hal ini bukan masalah karena setiap layanan push mengharapkan panggilan API yang sama. Artinya, Anda tidak perlu peduli siapa penyedia layanan push. Anda hanya perlu memastikan bahwa panggilan API Anda valid.

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

Berikut 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 hal ini adalah [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. Layanan push akan menjadi 'random-push-service.com' dan setiap endpoint bersifat unik untuk pengguna, yang ditunjukkan dengan 'some-jenis-of-unique-id-1234'. Saat mulai menggunakan push, 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 Web Push. Ini adalah standar IETF yang menentukan cara Anda melakukan panggilan API ke layanan push.

Panggilan API memerlukan header tertentu untuk ditetapkan 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?

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

Data yang Anda kirim dengan pesan push harus dienkripsi. Alasannya adalah untuk mencegah layanan push, yang bisa siapa saja, agar tidak dapat melihat data yang dikirim dengan pesan push. Hal ini penting karena browser yang memutuskan layanan push mana yang akan digunakan, yang dapat membuka pintu bagi browser yang menggunakan layanan push yang tidak aman atau aman.

Saat Anda memicu pesan push, layanan push akan menerima panggilan API dan mengantrekan pesan. Pesan ini akan tetap diantrekan hingga perangkat pengguna online dan layanan push dapat mengirimkan pesan. Petunjuk yang dapat Anda berikan ke layanan push menentukan cara pesan push dimasukkan ke dalam antrean.

Petunjuk tersebut mencakup detail seperti:

  • Time to live untuk pesan push. Ini menentukan berapa lama pesan harus diantrekan sebelum dihapus dan tidak terkirim.

  • Tentukan tingkat urgensinya. Hal ini berguna jika layanan push menghemat masa pakai baterai pengguna dengan hanya mengirimkan pesan prioritas tinggi.

  • Beri nama "topik" pada pesan push yang akan menggantikan pesan tertunda dengan pesan baru ini.

Saat server Anda ingin mengirim pesan push, server akan membuat permintaan protokol push web ke layanan push.

Langkah 3: Kirim peristiwa di perangkat pengguna

Setelah kami mengirim pesan push, layanan push akan menyimpan pesan Anda di servernya hingga salah satu peristiwa berikut terjadi:

  1. Perangkat akan online dan layanan push mengirimkan pesan.
  2. Masa berlaku pesan akan berakhir. Jika hal ini terjadi, layanan push akan menghapus pesan dari antreannya dan pesan tersebut tidak akan pernah dikirim.

Saat layanan push mengirimkan pesan, browser akan menerima pesan, mendekripsi data apa pun, dan mengirim peristiwa push di pekerja layanan Anda.

Service worker adalah file JavaScript "khusus". Browser dapat menjalankan JavaScript ini tanpa membuka halaman Anda. JavaScript ini bahkan dapat dieksekusi saat browser ditutup. Pekerja layanan juga memiliki API, seperti push, yang tidak tersedia di halaman web (yaitu API yang tidak tersedia di luar skrip pekerja layanan).

Di dalam peristiwa 'push' pekerja layanan, Anda dapat melakukan tugas latar belakang apa pun. Anda dapat melakukan panggilan analisis, 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 seluruh alur untuk pesan push.

Langkah berikutnya

Codelab