Cara kerja push

Matt Gaunt

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 memiliki gambaran tentang cara dan alasan pentingnya.

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 menerima pesan push).
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 inilah Anda dapat menampilkan notifikasi.

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

Langkah 1: Sisi klien

Langkah pertama adalah "mendaftarkan" pengguna ke pesan push.

Mendaftarkan pengguna memerlukan dua hal. Pertama, mendapatkan izin dari pengguna untuk mengirimi mereka pesan push. Kedua, mendapatkan PushSubscription dari browser.

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

Semua ini dilakukan di JavaScript dengan Push API.

Browser Support

• 42
• 17
• 44
• 16

Source

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

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

Langkah 2: Mengirim 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, penerima pesan, dan kriteria apa pun tentang cara mengirim pesan. Biasanya, panggilan API ini dilakukan dari server Anda.

Beberapa pertanyaan yang mungkin Anda tanyakan kepada diri sendiri:

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

Siapa dan apa layanan push itu?

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 dapat menggunakan layanan push apa pun yang diinginkan, sesuatu yang tidak dapat dikontrol oleh developer. Hal ini tidak menjadi masalah karena setiap layanan push mengharapkan panggilan API yang sama. Artinya, Anda tidak perlu peduli siapa layanan push-nya. 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.

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

Kunci dalam langganan akan dibahas nanti.

Seperti apa tampilan API?

Saya telah menyebutkan bahwa setiap layanan push web mengharapkan panggilan API yang sama. API tersebut adalah Protokol Web Push. Protokol 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, melihat data yang dikirim bersama pesan push. Hal ini penting mengingat browser-lah yang memutuskan layanan push mana yang akan digunakan, yang dapat membuka peluang bagi browser untuk 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 berada dalam antrean 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. Parameter ini menentukan berapa lama pesan harus diantrekan sebelum dihapus dan tidak dikirim.

• Tentukan tingkat urgensi pesan. Hal ini berguna jika layanan push menghemat daya tahan baterai pengguna dengan hanya mengirimkan pesan prioritas tinggi.

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

Langkah 3: Peristiwa push di perangkat pengguna

Setelah kami 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 dikirimkan.

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

Service worker adalah file JavaScript "khusus". Browser dapat mengeksekusi JavaScript ini tanpa membuka halaman Anda. Service worker bahkan dapat mengeksekusi JavaScript ini 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).

Anda dapat melakukan tugas latar belakang apa pun di dalam peristiwa 'push' pekerja layanan. Anda dapat melakukan panggilan analisis, meng-cache halaman 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 Web Push
• Protokol Push Web
• Menangani Peristiwa Push
• Menampilkan Notifikasi
• Perilaku Notifikasi
• Pola Notifikasi Umum
• FAQ Notifikasi Push
• Masalah Umum dan Melaporkan Bug

Codelab

• Membangun klien notifikasi push
• Membangun server notifikasi push