Notifikasi PPush memungkinkan Anda memberikan pengalaman seperti aplikasi yang bagus untuk pengguna, memberi tahu mereka tentang update penting dan tepat waktu seperti pesan chat masuk. Platform notifikasi relatif baru di browser dan karena semakin banyak kasus penggunaan dan persyaratan yang disempurnakan, kami melihat banyak penambahan pada API untuk notifikasi. Begitu juga dengan Chrome 50 (beta pada Maret 2016), dengan tidak kurang dari empat fitur baru yang memberi developer kontrol lebih atas notifikasi. Anda akan 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 notifikasi ulang saat notifikasi menggantikan notifikasi yang saat ini ditampilkan.
Chrome 50 juga telah menambahkan Payload untuk notifikasi Push. Untuk terus mendapatkan info terbaru tentang Notifications API seperti yang diimplementasikan di Chrome, ikuti spec dan pelacak masalah spesifikasi.
Buat tombol tindakan yang menarik dengan ikon khusus
Dalam postingan terbaru tentang tombol tindakan notifikasi di Chrome 49, saya menyebutkan bahwa Anda tidak dapat melampirkan gambar ke tombol notifikasi untuk membuatnya keren dan menarik, tetapi Anda dapat menggunakan karakter Unicode untuk emoji inline dll.. Sekarang Anda tidak perlu khawatir: dengan penambahan terbaru ini, sekarang Anda dapat menentukan gambar di 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 menurut platform. Misalnya, di Android, ikon akan menerapkan filter abu-abu gelap di versi 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 bahkan mungkin tidak dapat menampilkan ikon tindakan, jadi pastikan Anda menggunakan ikon untuk memberikan konteks pada tindakan, bukan sebagai satu-satunya indikator intent.
Dan terakhir, karena resource harus didownload, sebaiknya jaga ikon tetap sekecil mungkin dan simpan dalam cache terlebih dahulu dalam peristiwa penginstalan. (Pada saat penulisan ini, pengambilan resource notifikasi di Chrome belum dirutekan melalui pekerja layanan.)
Peristiwa penutupan notifikasi
Fitur notifikasi yang sering diminta adalah kemampuan untuk mengetahui kapan pengguna menutup notifikasi. Kami tidak memiliki cara untuk melakukannya hingga serangkaian perubahan terbaru pada spesifikasi notifikasi menambahkan peristiwa notificationclose.
Dengan menggunakan peristiwa notificationclick dan notifikasiclose, Anda dapat memahami cara pengguna berinteraksi dengan notifikasi. Apakah pengguna membiarkannya terbuka untuk waktu yang lama lalu secara aktif menolaknya atau langsung menanggapinya.
Salah satu kasus penggunaan yang populer adalah kemampuan menyinkronkan notifikasi antar perangkat. Jika pengguna menutup notifikasi di perangkat desktop, notifikasi yang sama di perangkat seluler juga akan ditutup. Kami belum bisa melakukan ini secara otomatis (ingat, setiap pesan push harus menampilkan notifikasi), tetapi dengan menggunakan notificationclose, ini membuka kemampuan untuk menangani hal ini dengan memungkinkan Anda melacak status notifikasi untuk pengguna di server Anda dan menyinkronkannya dengan perangkat lain saat pengguna menggunakannya.
Untuk menggunakan peristiwa notifikasiclose, daftarkan peristiwa tersebut di dalam pekerja layanan Anda dan peristiwa tersebut hanya akan aktif ketika pengguna telah secara aktif menutup notifikasi, misalnya, jika pengguna menutup notifikasi tertentu atau menutup semua notifikasi di baki mereka (di Android).
Jika tanda needInteraction salah atau tidak disetel, maka jika notifikasi tidak ditutup secara manual oleh pengguna, tetapi otomatis oleh sistem, peristiwa penutupan notifikasi tidak akan dipicu.
Penerapan sederhananya 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 Generator Notifikasi; Anda akan mendapatkan pemberitahuan saat notifikasi ditutup.
Jangan ganggu pengguna saat Anda mengganti notifikasi yang ada
Saya cukup yakin bahwa Paman Ben membicarakan sistem notifikasi, bukan kekuatan Peter Parker, saat dia mengatakan "Dengan kekuatan besar datang tanggung jawab yang besar". Sistem notifikasi adalah media yang efektif untuk berinteraksi dengan pengguna. Jika Anda menyalahgunakan kepercayaannya, mereka akan menonaktifkan semua notifikasi dan Anda dapat kehilangan mereka sepenuhnya.
Saat membuat notifikasi, Anda dapat menyetelnya agar membuat notifikasi suara atau getaran untuk menarik perhatian pengguna. Selain itu, Anda dapat mengganti notifikasi yang ada dengan menggunakan kembali atribut 'tag' pada objek notifikasi baru.
Sebelum Chrome 50, setiap kali Anda membuat notifikasi atau mengganti notifikasi yang sudah ada, notifikasi akan menjalankan pola getaran atau memutar peringatan suara dan hal ini dapat membuat pengguna merasa kesal. Sekarang di Chrome 50, Anda kini memiliki kontrol atas apa yang terjadi selama notifikasi ulang melalui flag boolean sederhana yang disebut 'renotify'. Perilaku default baru saat menggunakan 'tag' yang sama untuk notifikasi berikutnya adalah bersifat diam dan sebagai developer, Anda harus memilih untuk "memberi tahu ulang" pengguna dengan menyetel flag ke "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Anda dapat mencobanya di Notification Generator.
Mengelola stempel waktu yang ditampilkan kepada pengguna
Di Android, notifikasi Chrome menampilkan waktu pembuatan di pojok kanan atas secara default. Sayangnya, saat ini mungkin bukan saat notifikasi dibuat oleh sistem Anda. Misalnya, peristiwa mungkin terpicu ketika 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 dalam 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.