Cara kerja push

Sebelum membahas API, mari kita lihat push dari tingkat tinggi, dari awal hingga akhir. Kemudian, saat kita membahas topik atau API satu per satu nanti, Anda akan mendapatkan gambaran tentang bagaimana dan mengapa hal ini penting.

Tiga langkah utama untuk menerapkan push adalah:

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

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

Langkah 1: Sisi Klien

Langkah pertama adalah "mendaftarkan" pengguna ke pesan push.

Untuk mendaftarkan pengguna, Anda memerlukan dua hal. Pertama, mendapatkan izin dari pengguna untuk mengirimkan pesan push kepada mereka. Kedua, mendapatkan PushSubscription dari browser.

PushSubscription berisi semua informasi yang kita perlukan untuk mengirim pesan push kepada pengguna tersebut. Anda dapat menganggapnya sebagai ID untuk perangkat pengguna tersebut.

Semua ini dilakukan di JavaScript dengan Push API.

Sebelum mendaftarkan pengguna, 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. Kunci ini memungkinkan layanan push mengetahui server aplikasi mana yang mendaftarkan pengguna dan memastikan bahwa server yang sama memicu pesan push ke pengguna tersebut.

Setelah mendaftarkan pengguna 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.

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, siapa yang akan menerima pesan, dan kriteria apa pun tentang cara mengirim pesan. Biasanya, panggilan API ini dilakukan dari server Anda.

Beberapa pertanyaan yang mungkin Anda ajukan:

• Siapa dan apa itu layanan push?
• Seperti apa API-nya? Apakah JSON, XML, atau yang lainnya?
• Apa yang dapat dilakukan API?

Siapa dan apa itu layanan push?

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

Setiap browser dapat menggunakan layanan push apa pun yang diinginkannya, dan developer tidak memiliki kontrol atas hal ini. Hal ini tidak menjadi masalah karena setiap layanan push mengharapkan panggilan API yang sama. Artinya, Anda tidak perlu memikirkan siapa layanan push tersebut. Anda hanya perlu memastikan bahwa panggilan API Anda valid.

Untuk mendapatkan URL yang sesuai untuk memicu pesan push (yaitu URL untuk layanan push), Anda hanya perlu melihat nilai endpoint di 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=="
  }
}

Dalam hal ini, endpoint 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-kind-of-unique-id-1234'. Saat mulai menggunakan push, Anda akan melihat pola ini.

Kunci dalam langganan akan dibahas nanti.

Seperti apa 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 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 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, dapat melihat data yang dikirim dengan pesan push. Hal ini penting mengingat browser yang memutuskan layanan push mana yang akan digunakan, yang dapat membuka pintu bagi browser untuk menggunakan layanan push yang tidak 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 kepada layanan push menentukan cara pesan push diantrekan.

Petunjuk ini mencakup detail seperti:

• Masa aktif pesan push. Hal ini menentukan berapa lama pesan harus diantrekan sebelum dihapus dan tidak dikirim.

• Menentukan urgensi pesan. Hal ini berguna jika layanan push mempertahankan masa pakai baterai pengguna dengan hanya mengirimkan pesan prioritas tinggi.

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

Langkah 3: Peristiwa push di perangkat pengguna

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

1. Perangkat online dan layanan push mengirimkan pesan.
2. Masa berlaku pesan 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 service worker Anda.

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

Di dalam peristiwa 'push' pekerja layanan, Anda dapat melakukan tugas latar belakang apa pun. Anda dapat melakukan panggilan analisis, menyimpan halaman ke cache secara offline, dan menampilkan notifikasi.

Itulah seluruh alur untuk pesan push.

Langkah berikutnya

• Ringkasan Notifikasi Push Web
• Cara Kerja Push
• Mendaftarkan Pengguna
• UX Izin
• Mengirim Pesan dengan Library Push Web
• Protokol Push Web
• Menangani Peristiwa Push
• Menampilkan Notifikasi
• Perilaku Notifikasi
• Pola Notifikasi Umum
• FAQ Notifikasi Push
• Masalah Umum dan Melaporkan Bug

Codelab

• Membuat klien notifikasi push
• Membuat server notifikasi push