Pada titik ini, kita telah membahas membuat pengguna berlangganan dan mengirim pesan push. Langkah selanjutnya adalah menerima pesan push ini di perangkat pengguna dan menampilkan notifikasi (serta melakukan pekerjaan yang mungkin ingin kita lakukan).
Peristiwa Push
Saat pesan diterima, maka akan mengakibatkan kejadian push dikirim di pekerja layanan Anda.
Kode untuk menyiapkan pemroses peristiwa push harus cukup mirip dengan peristiwa lainnya pemroses yang akan 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 paling aneh dari kode ini bagi sebagian besar developer yang baru mengenal pekerja layanan adalah self
variabel. self
biasanya digunakan di Web Worker, yaitu pekerja layanan. self
merujuk ke
cakupan global, seperti window
di halaman web. Tapi untuk pekerja web dan pekerja layanan,
self
merujuk ke pekerja itu sendiri.
Pada contoh di atas, self.addEventListener()
dapat dianggap sebagai menambahkan pemroses peristiwa ke
pekerja layanan itu sendiri.
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()
Kebanyakan 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. Namun,
kehilangan dua bagian fungsi yang sangat penting. Aplikasi tidak menampilkan notifikasi dan
tidak menggunakan event.waitUntil()
.
Tunggu Sampai
Salah satu hal yang perlu dipahami tentang pekerja layanan adalah
bahwa Anda memiliki sedikit kontrol terhadap kapan
kode pekerja layanan akan dijalankan. Browser memutuskan kapan harus mengaktifkannya
menghentikannya. Satu-satunya cara agar Anda dapat memberi tahu browser, "Hei, saya sangat sibuk melakukan hal penting
stuff", adalah untuk meneruskan promise ke dalam metode event.waitUntil()
. Dengan demikian, {i>browser<i} akan
membuat pekerja layanan tetap berjalan sampai promise yang Anda teruskan telah diselesaikan.
Dalam peristiwa push, ada persyaratan tambahan bahwa Anda harus menampilkan notifikasi sebelum janji yang Anda sampaikan telah berakhir.
Berikut adalah contoh dasar cara 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.
Demi menjaga contoh ini sejelas mungkin, saya telah
menetapkan promise ini ke
variabel yang disebut promiseChain
. Objek ini kemudian diteruskan ke event.waitUntil()
. Saya tahu ini
sangat bertele-tele, tetapi saya pernah melihat
berbagai masalah yang berujung pada
salah memahami apa yang harus diteruskan ke waitUntil()
atau sebagai akibat dari pelanggaran promise
jaringan.
Contoh yang lebih rumit dengan permintaan jaringan untuk data dan pelacakan kejadian push dengan analitik akan 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 bisa berpura-pura membuat permintaan jaringan
kepada penyedia analisis kami. Kita juga membuat permintaan jaringan, mendapatkan
respons dan menampilkan notifikasi menggunakan data respons untuk judul dan
pesan dari notifikasi tersebut.
Kita bisa memastikan bahwa pekerja layanan tetap hidup saat kedua tugas ini dilakukan dengan menggabungkan
promise ini dengan Promise.all()
. Promise yang dihasilkan diteruskan ke event.waitUntil()
artinya browser akan menunggu hingga kedua promise selesai sebelum memeriksa bahwa notifikasi
telah ditampilkan dan menghentikan pekerja layanan.
Alasan kami harus mengkhawatirkan waitUntil()
dan cara menggunakannya adalah karena
masalah umum yang dihadapi developer adalah saat rantai promise salah / rusak, Chrome akan
tampilkan "default" ini notifikasi:
Chrome hanya akan menampilkan pesan "Situs ini telah diupdate di latar belakang". notifikasi ketika
pesan push diterima dan peristiwa push di pekerja layanan tidak menampilkan
notifikasi setelah promise yang diteruskan ke event.waitUntil()
selesai.
Alasan utama mengapa developer mengetahui hal ini adalah karena kode mereka akan
sering memanggil self.registration.showNotification()
, tetapi mereka tidak melakukannya
apa pun dengan promise yang ditampilkannya. Hal ini sesekali menghasilkan notifikasi default
sedang ditampilkan. Misalnya, kita bisa
menghapus {i>return<i} untuk
self.registration.showNotification()
dalam contoh di atas dan kita berisiko melihatnya
notifikasi.
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 bahwa ada hal yang mudah terlewatkan.
Perlu diingat - jika Anda melihat notifikasi tersebut, periksa rantai promise dan event.waitUntil()
Anda.
Di bagian berikutnya, kita akan melihat apa yang bisa kita lakukan untuk menata gaya notifikasi dan konten apa yang dapat kita tampilkan.
Langkah berikutnya
- Ringkasan Notifikasi Push Web
- Cara Kerja Push
- Berlangganan 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