Kita telah belajar banyak sejak Notifikasi dan Pesan Push hadir di Chrome. Satu masukan khusus tentang perangkat kelas Desktop adalah notifikasi akan tetap ada dan terlihat di layar pengguna hingga ditutup secara aktif oleh pengguna.
Saat halaman terbuka, Anda dapat membuat timer JavaScript sederhana yang akan otomatis menutup notifikasi. Namun, sekarang kita hidup di dunia dengan pekerja layanan: saat aplikasi web dapat aktif melewati masa aktif jendela, dan pekerja layanan dapat beralih ke mode tidur secepat mungkin untuk menghemat resource. Artinya, kita memerlukan cara lain untuk menciptakan pengalaman yang baik bagi pengguna.
Spesifikasi Notifikasi baru-baru ini diperbarui agar developer dapat menunjukkan bahwa notifikasi tidak boleh ditutup secara otomatis oleh sistem.
Notifikasi memiliki flag preferensi interaksi wajib terkait yang awalnya tidak ditetapkan. Jika ditetapkan, menunjukkan bahwa pada perangkat dengan layar yang cukup besar, notifikasi harus tetap tersedia hingga pengguna mengaktifkan atau menutup notifikasi.
Ini mungkin tampak aneh, tetapi maksudnya adalah, kecuali jika dinyatakan lain, notifikasi harus dihapus dari tampilan setelah beberapa saat.
Chrome 47 (versi beta pada Oktober 2015) kini mendukung opsi requireInteraction. Kecuali disediakan
secara eksplisit dan disetel ke true, semua notifikasi di desktop akan ditutup setelah
sekitar 20 detik. Namun, bagian yang menarik adalah Chrome baru-baru ini
baru saja menghapus Pusat Notifikasi dari semua platform desktop (tetapi ChromeOS). Artinya,
notifikasi yang diminimalkan dianggap telah ditutup dan tidak dapat diakses dalam panggilan ke getNotifications
di pekerja layanan.
Di Chrome untuk Android, karena notifikasi diperkecil di area baki notifikasi, opsi
requireInteraction akan diabaikan.
navigator.serviceWorker.register('sw.js');
function showNotifications() {
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('requireInteraction: true', {
body: 'Requires interaction',
icon: '../images/touch/chrome-touch-icon-192x192.png',
requireInteraction: true,
tag: 'require-interaction'
});
registration.showNotification('requireInteraction: false', {
body: 'Does not require interaction',
icon: '../images/touch/chrome-touch-icon-192x192.png',
requireInteraction: false,
tag: 'no-require-interaction'
});
});
}
});
}