Sebelum masuk ke API, mari kita lihat push dari tingkat tinggi, awal hingga akhir. Kemudian saat kita membahas masing-masing topik atau API nanti, Anda akan memiliki gagasan tentang bagaimana dan mengapa hal ini penting.
Tiga langkah utama untuk menerapkan push adalah:
- Menambahkan logika sisi klien agar pengguna berlangganan ke push (yaitu JavaScript dan UI di aplikasi web Anda yang mendaftarkan pengguna ke pesan push).
- Panggilan API dari back-end / aplikasi Anda yang memicu pesan push ke perangkat pengguna.
- File JavaScript pekerja layanan yang akan menerima "peristiwa push" saat push tiba di perangkat. Di JavaScript inilah Anda dapat menampilkan notifikasi.
Mari kita lihat apa yang diperlukan setiap langkah ini secara lebih mendetail.
Langkah 1: Sisi Klien
Langkah pertama adalah "berlangganan" pengguna untuk mengirim pesan.
Menambahkan pengguna memerlukan dua hal. Pertama, dapatkan izin dari pengguna untuk mengiriminya pesan push. Kedua, mendapatkan PushSubscription dari browser.
PushSubscription berisi semua informasi yang kita perlukan untuk mengirim pesan push kepada pengguna tersebut.
Anda bisa menganggap ini sebagai ID untuk perangkat pengguna.
Ini semua dilakukan di JavaScript dengan Push API.
Sebelum membuat pengguna berlangganan, Anda perlu membuat kumpulan "kunci server aplikasi", yang akan kita bahas nanti.
Kunci server aplikasi, yang juga dikenal sebagai kunci VAPID, bersifat unik untuk server Anda. Fungsi ini memungkinkan layanan push untuk mengetahui server aplikasi mana yang membuat pengguna berlangganan dan memastikan bahwa server tersebut adalah server yang sama yang memicu pesan push ke pengguna tersebut.
Setelah pengguna berlangganan dan memiliki PushSubscription, Anda harus mengirimkan
detail PushSubscription ke backend / server. Di server, Anda akan menyimpan langganan ini ke database dan menggunakannya untuk mengirim pesan push ke pengguna tersebut.
Langkah 2: Kirim pesan push
Jika ingin mengirim pesan push kepada pengguna, Anda perlu melakukan panggilan API ke layanan push. Panggilan API ini akan mencakup data yang akan dikirim, penerima pesan, dan kriteria pengiriman pesan. Biasanya panggilan API ini dilakukan dari server Anda.
Beberapa pertanyaan yang mungkin Anda tanyakan pada diri sendiri:
- Siapa dan apa itu layanan push?
- Seperti apa tampilan API tersebut? Apakah JSON, XML, atau 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 diantrekan hingga browser online.
Setiap browser dapat menggunakan layanan push apa pun yang mereka inginkan, yang tidak dapat dikontrol oleh developer. Hal ini tidak menjadi masalah karena setiap layanan push mengharapkan panggilan API yang sama. Artinya, Anda tidak perlu memperhatikan siapa layanan push tersebut. 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.
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-jenis-of-unique-id-1234/v2/]. Layanan push akan menjadi 'random-push-service.com' dan setiap endpoint unik untuk pengguna, yang ditunjukkan dengan 'some-jenis-of-unique-id-1234'. Saat Anda mulai bekerja dengan {i>push<i}, Anda akan melihat pola ini.
Kunci dalam langganan akan dibahas nanti.
Seperti apa tampilan API tersebut?
Saya menyebutkan bahwa setiap layanan web push mengharapkan panggilan API yang sama. API tersebut adalah Web Push Protocol. Ini adalah standar IETF yang menentukan cara Anda membuat panggilan API ke layanan push.
Panggilan API mengharuskan pengaturan header tertentu dan data berupa aliran byte. Kita akan melihat library yang dapat melakukan panggilan API ini 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 tersebut.
Data yang Anda kirim dengan pesan push harus dienkripsi. Alasannya adalah hal ini mencegah layanan push, yang bisa jadi siapa saja, untuk melihat data yang dikirim dengan pesan push. Hal ini penting mengingat bahwa browserlah yang memutuskan layanan push mana yang akan digunakan, yang dapat membuka pintu ke browser menggunakan layanan push yang tidak aman atau terlindungi.
Saat Anda memicu pesan push, layanan push akan menerima panggilan API dan mengantrekan pesan. Pesan ini akan tetap dimasukkan dalam antrean sampai perangkat pengguna online dan layanan push dapat mengirimkan pesan. Petunjuk yang dapat Anda berikan ke layanan push akan menentukan cara pesan push diantrekan.
Petunjuknya mencakup detail seperti:
Waktu aktif untuk pesan push. Tag ini menentukan berapa lama pesan harus dimasukkan ke dalam antrean sebelum dihapus dan tidak dikirimkan.
Tentukan urgensi pesan. Hal ini berguna jika layanan push mempertahankan masa pakai baterai pengguna dengan hanya mengirimkan pesan berprioritas tinggi.
Berikan nama "topik" pada pesan push untuk menggantikan setiap pesan yang tertunda dengan pesan baru ini.
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:
- Perangkat online dan layanan push akan mengirimkan pesan.
- Masa berlaku pesan akan habis. Jika hal ini terjadi, layanan push menghapus pesan dari antreannya dan tidak akan pernah dikirimkan.
Saat layanan push mengirimkan pesan, browser akan menerima pesan tersebut, mendekripsi data apa pun, dan mengirim peristiwa push di pekerja layanan Anda.
Pekerja layanan adalah file JavaScript "khusus". Browser dapat menjalankan JavaScript ini tanpa perlu membuka halaman Anda. Bard dapat menjalankan JavaScript ini saat browser ditutup. Pekerja layanan juga memiliki API, seperti push, yang tidak tersedia di halaman web (yaitu API yang tidak tersedia dari skrip pekerja layanan).
Dalam peristiwa 'push' pekerja layanan, Anda dapat melakukan tugas latar belakang apa pun. Anda dapat melakukan panggilan analisis, meng-cache halaman offline, dan menampilkan notifikasi.
Itulah keseluruhan alur dari pesan push.
Langkah berikutnya
- Ringkasan Notifikasi Push Web
- Cara Kerja Push
- Membuat Langganan Pengguna
- UX Izin
- Mengirim Pesan dengan Library Web Push
- Protokol Push Web
- Menangani Peristiwa Push
- Menampilkan Notifikasi
- Perilaku Notifikasi
- Pola Notifikasi Umum
- FAQ Notifikasi Push
- Masalah Umum dan Melaporkan Bug