Pada titik ini, kita membahas berlangganan pengguna dan mengirim pesan push. Langkah berikutnya adalah menerima pesan push ini di perangkat pengguna dan menampilkan notifikasi (serta melakukan pekerjaan lain yang mungkin ingin kita lakukan).
Peristiwa Dorongan
Saat pesan diterima, akan mengakibatkan peristiwa push yang dikirimkan dalam pekerja layanan Anda.
Kode untuk menyiapkan pemroses peristiwa push harus mirip dengan pemroses peristiwa lain yang Anda tulis di JavaScript:
self.addEventListener('push', function(event) {
if (event.data) {
console.log('This push event has data: ', event.data.text());
} else {
console.log('This push event has no data.');
}
});
Bagian teraneh dari kode ini bagi sebagian besar developer yang baru menggunakan pekerja layanan adalah variabel self
. self
biasanya digunakan dalam Pekerja Web, yang merupakan pekerja layanan. self
mengacu pada cakupan global, seperti window
di halaman web. Namun, untuk pekerja web dan pekerja layanan, self
mengacu pada pekerja itu sendiri.
Pada contoh di atas, self.addEventListener()
dapat dianggap sebagai menambahkan pemroses peristiwa ke pekerja layanan itu sendiri.
Di dalam contoh peristiwa push, kita memeriksa apakah ada data dan mencetak sesuatu ke konsol.
Ada cara lain untuk mengurai data dari peristiwa push:
// Returns string
event.data.text()
// Parses data as JSON string and returns an Object
event.data.json()
// Returns blob of data
event.data.blob()
// Returns an arrayBuffer
event.data.arrayBuffer()
Sebagian besar orang menggunakan json()
atau text()
bergantung pada apa yang mereka harapkan dari aplikasi mereka.
Contoh ini menunjukkan cara menambahkan pemroses peristiwa push dan cara mengakses data, tetapi
tidak ada dua bagian fungsi yang sangat penting. Ikon ini tidak menampilkan notifikasi dan
tidak menggunakan event.waitUntil()
.
Tunggu Hingga
Salah satu hal yang perlu dipahami tentang pekerja layanan adalah Anda memiliki sedikit kontrol terkait kapan kode pekerja layanan akan dijalankan. Browser memutuskan kapan akan mengaktifkannya dan kapan
harus menghentikannya. Satu-satunya cara Anda dapat memberi tahu browser, "Saya sangat sibuk melakukan hal-hal penting", adalah dengan meneruskan promise ke dalam metode event.waitUntil()
. Dengan begitu, browser akan terus menjalankan pekerja layanan hingga promise yang Anda teruskan selesai.
Dengan peristiwa push, ada persyaratan tambahan bahwa Anda harus menampilkan notifikasi sebelum promise yang Anda teruskan telah diselesaikan.
Berikut adalah contoh dasar menampilkan notifikasi:
self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification('Hello, World.');
event.waitUntil(promiseChain);
});
Memanggil self.registration.showNotification()
adalah metode yang menampilkan notifikasi kepada pengguna dan menampilkan promise yang akan diselesaikan setelah notifikasi ditampilkan.
Agar contoh ini sejelas mungkin, saya telah menetapkan promise ini ke variabel yang disebut promiseChain
. Nilai ini kemudian diteruskan ke event.waitUntil()
. Saya tahu cara ini
sangat panjang, tetapi saya telah melihat sejumlah masalah yang memuncak sebagai akibat dari
kesalahpahaman tentang apa yang harus diteruskan ke waitUntil()
atau akibat dari promise
chain yang rusak.
Contoh yang lebih rumit dengan permintaan jaringan untuk data dan melacak peristiwa push dengan analisis dapat terlihat seperti ini:
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
return self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
Di sini kita memanggil fungsi yang menampilkan promise pushReceivedTracking()
, yang, sebagai contoh, kita dapat berpura-pura akan membuat permintaan jaringan ke penyedia analisis. Kami juga membuat permintaan jaringan, mendapatkan
respons dan menampilkan notifikasi menggunakan data respons untuk judul dan
pesan notifikasi.
Kita dapat memastikan pekerja layanan tetap aktif meskipun kedua tugas ini dilakukan dengan menggabungkan
janji ini dengan Promise.all()
. Promise yang dihasilkan diteruskan ke event.waitUntil()
, yang berarti browser akan menunggu hingga kedua promise selesai sebelum memeriksa apakah notifikasi telah ditampilkan dan menghentikan pekerja layanan.
Alasan kami harus mengkhawatirkan waitUntil()
dan cara menggunakannya adalah salah satu masalah paling
umum yang dihadapi developer adalah saat rantai promise salah / rusak, Chrome akan
menampilkan notifikasi "default" ini:
![Gambar notifikasi default di Chrome](https://web.dev/static/articles/push-notifications-handling-messages/image/an-image-the-default-not-ec0a0feda0315.png?authuser=6&hl=id)
Chrome hanya akan menampilkan notifikasi "Situs ini telah diperbarui di latar belakang". saat pesan push diterima dan peristiwa push di pekerja layanan tidak menampilkan notifikasi setelah promise yang diteruskan ke event.waitUntil()
selesai.
Alasan utama developer menemukan hal ini adalah karena kode mereka sering
memanggil self.registration.showNotification()
, tetapi mereka tidak melakukan
apa pun dengan promise yang ditampilkannya. Hal ini sesekali mengakibatkan notifikasi
default ditampilkan. Misalnya, kita dapat menghapus hasil untuk
self.registration.showNotification()
dalam contoh di atas dan kita berisiko melihat notifikasi
ini.
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
Anda dapat melihat bagaimana ini adalah hal yang mudah untuk dilewatkan.
Perlu diingat - jika Anda melihat notifikasi tersebut, periksa rantai promise dan event.waitUntil()
Anda.
Di bagian berikutnya, kita akan melihat hal yang dapat dilakukan untuk menata gaya notifikasi dan konten yang dapat ditampilkan.
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