Kami telah mempelajari banyak hal sejak Notifikasi dan Push Messaging 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 service worker: tempat aplikasi web dapat tetap berjalan setelah masa aktif jendela dan service worker dinonaktifkan secepat mungkin untuk menghemat resource. Artinya, kita memerlukan cara lain untuk menciptakan pengalaman yang baik bagi pengguna.
Spesifikasi Notifikasi baru-baru ini diperbarui untuk memberi developer kemampuan untuk menunjukkan bahwa notifikasi tidak akan otomatis ditutup oleh sistem.
Notifikasi memiliki flag preferensi interaksi yang diperlukan 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.
Hal ini mungkin tampak aneh, tetapi yang dimaksud adalah bahwa notifikasi harus dihapus dari tampilan setelah jangka waktu yang singkat, kecuali jika diberi tahu sebaliknya.
Chrome 47 (beta pada Oktober 2015) kini mendukung opsi requireInteraction. Kecuali jika secara eksplisit
disediakan dan ditetapkan ke true, semua notifikasi di desktop akan ditutup setelah
sekitar 20 detik. Namun, bagian yang menarik adalah Chrome baru saja
menghapus Pusat Notifikasi dari semua platform desktop (kecuali ChromeOS). Artinya,
notifikasi yang diperkecil dianggap 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'
});
});
}
});
}