Notifikasi push memungkinkan Anda memberikan pengalaman seperti aplikasi yang luar biasa bagi pengguna, dengan memberi tahu mereka tentang update penting dan tepat waktu seperti pesan chat masuk. Platform notifikasi relatif baru di browser dan seiring dengan makin banyak kasus penggunaan dan persyaratan yang diwujudkan, kami melihat banyak tambahan pada API untuk notifikasi. Chrome 50 (beta pada Maret 2016) tidak terkecuali, dengan tidak kurang dari empat fitur baru yang memberi developer kontrol lebih besar atas notifikasi. Anda mendapatkan kemampuan untuk:
- menambahkan ikon ke tombol notifikasi,
- mengubah stempel waktu untuk membantu menciptakan pengalaman yang konsisten,
- melacak peristiwa penutupan notifikasi untuk membantu menyinkronkan notifikasi dan memberikan analisis,
- mengelola pengalaman pemberitahuan ulang saat notifikasi menggantikan notifikasi yang saat ini ditampilkan.
Chrome 50 juga telah menambahkan Payload untuk notifikasi Push. Untuk terus mendapatkan informasi terbaru tentang Notifications API seperti yang diterapkan di Chrome, ikuti spesifikasi dan pelacak masalah spesifikasi.
Membuat tombol tindakan yang menarik dengan ikon kustom
Dalam postingan terbaru tentang tombol tindakan notifikasi di Chrome 49, kami menyebutkan bahwa Anda tidak dapat melampirkan gambar ke tombol notifikasi agar tampilannya menarik, tetapi Anda dapat menggunakan karakter Unicode untuk menyisipkan emoji dan sebagainya. Sekarang Anda tidak perlu khawatir: dengan penambahan terbaru ini, Anda kini dapat menentukan gambar pada tombol tindakan:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
Tampilan ikon tindakan berbeda-beda menurut platform. Misalnya, di Android, ikon akan memiliki filter abu-abu gelap yang diterapkan di Lollipop dan yang lebih baru, serta filter putih sebelum Lollipop, sedangkan di desktop akan berwarna penuh. (Catatan: ada diskusi tentang masa depan fitur ini di desktop.) Beberapa platform mungkin bahkan tidak dapat menampilkan ikon tindakan, jadi pastikan Anda menggunakan ikon untuk memberikan konteks pada tindakan, bukan sebagai satu-satunya indikator intent.
Terakhir, karena resource harus didownload, sebaiknya buat ikon sekecil mungkin dan pra-cache di peristiwa penginstalan Anda. (Pada saat penulisan ini, pengambilan resource notifikasi di Chrome belum diarahkan melalui pekerja layanan.)
Peristiwa penutupan notifikasi
Fitur notifikasi yang sering diminta adalah kemampuan untuk mengetahui kapan pengguna telah menutup notifikasi. Kami tidak dapat melakukannya hingga serangkaian perubahan terbaru pada spesifikasi notifikasi menambahkan peristiwa notificationclose.
Dengan menggunakan peristiwa notificationclick dan notificationclose, Anda dapat memahami cara pengguna berinteraksi dengan notifikasi. Apakah mereka meninggalkannya terbuka untuk waktu yang lama, lalu secara aktif menutupnya atau apakah mereka segera menindaklanjutinya.
Salah satu kasus penggunaan yang populer adalah dapat menyinkronkan notifikasi antar-perangkat. Jika pengguna menutup notifikasi di perangkat desktop, notifikasi yang sama di perangkat seluler juga akan ditutup. Kita belum memiliki kemampuan untuk melakukannya secara diam-diam (ingat setiap pesan push harus memiliki notifikasi yang ditampilkan), tetapi dengan menggunakan notificationclose, kemampuan untuk menangani hal ini akan terbuka dengan memungkinkan Anda melacak status notifikasi untuk pengguna di server dan menyinkronkannya dengan perangkat lain saat pengguna menggunakannya.
Untuk menggunakan peristiwa notificationclose, daftarkan di dalam pekerja layanan Anda dan peristiwa ini hanya akan diaktifkan saat pengguna secara aktif menutup notifikasi, misalnya, jika pengguna menutup notifikasi tertentu atau menutup semua notifikasi di baki (di Android).
Jika tanda requireInteraction bernilai salah atau tidak disetel, jika notifikasi tidak ditutup secara manual oleh pengguna, tetapi secara otomatis oleh sistem, peristiwa notificationclose tidak akan dipicu.
Implementasi sederhana ditampilkan di bawah ini. Saat pengguna menutup notifikasi, Anda akan mendapatkan akses ke objek notifikasi tempat Anda dapat menjalankan logika kustom.
self.addEventListener('notificationclose', e => console.log(e.notification));
Anda dapat mengujinya di Notification Generator; Anda akan mendapatkan notifikasi saat menutup notifikasi.
Jangan mengganggu pengguna saat Anda mengganti notifikasi yang ada
Saya cukup yakin Paman Ben sebenarnya berbicara tentang sistem notifikasi, bukan kekuatan Peter Parker, saat dia berkata "Dengan kekuatan besar, tanggung jawab yang besar muncul bersamanya". Sistem notifikasi adalah media yang efektif untuk berinteraksi dengan pengguna. Jika Anda menyalahgunakan kepercayaan mereka, mereka akan menonaktifkan semua notifikasi dan Anda mungkin kehilangannya sepenuhnya.
Saat membuat notifikasi, Anda dapat menyetelnya untuk membuat notifikasi yang dapat didengar atau bergetar untuk menarik perhatian pengguna. Selain itu, Anda dapat mengganti notifikasi yang ada dengan menggunakan kembali atribut 'tag'-nya di objek notifikasi baru.
Sebelum Chrome 50, setiap kali Anda membuat notifikasi atau mengganti notifikasi yang ada, notifikasi akan menjalankan pola getaran atau memutar notifikasi yang dapat didengar dan hal ini dapat membuat pengguna merasa frustrasi. Sekarang di Chrome 50, Anda kini memiliki kontrol atas hal-hal yang terjadi selama notifikasi ulang melalui flag boolean sederhana yang disebut 'renotify'. Perilaku default baru saat menggunakan 'tag' yang sama untuk notifikasi berikutnya adalah tidak bersuara dan sebagai developer, Anda harus memilih untuk "memberi tahu ulang" pengguna dengan menetapkan tanda ke "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Anda dapat mencobanya di Generator Notifikasi.
Mengelola stempel waktu yang ditampilkan kepada pengguna
Di Android, notifikasi Chrome menampilkan waktu pembuatannya di sudut kanan atas secara default. Sayangnya, ini mungkin bukan waktu saat notifikasi benar-benar dibuat oleh sistem Anda. Misalnya, peristiwa mungkin telah dipicu saat perangkat offline, atau notifikasi dapat ditampilkan untuk rapat mendatang. Mulai Chrome 50, Chrome telah menambahkan properti 'stempel waktu' baru yang memungkinkan developer memberikan waktu yang harus ditampilkan di notifikasi.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Stempel waktu saat ini hanya terlihat di Chrome untuk Android. Meskipun tidak terlihat di desktop, hal ini akan memengaruhi urutan notifikasi di perangkat seluler dan desktop.