Мы многому научились с тех пор, как уведомления и push-сообщения появились в Chrome. Одним из конкретных отзывов об устройствах класса Desktop было то, что уведомления будут оставаться и отображаться на экране пользователя до тех пор, пока пользователь не отклонит их.
Когда страница открыта, можно создать простой таймер JavaScript, который автоматически закроет уведомление. Но теперь мы живем в мире с service worker: где веб-приложения могут жить дольше, чем окно, а service worker усыпляются как можно быстрее, чтобы сэкономить ресурсы. Это значит, что нам нужен другой способ создания хорошего опыта для пользователей.
Недавно была обновлена спецификация уведомлений, чтобы дать разработчику возможность указать, что уведомление не должно автоматически отклоняться системой .
Уведомление имеет связанный флаг предпочтения «требовать взаимодействия», который изначально не установлен. Если установлен, это означает, что на устройствах с достаточно большим экраном уведомление должно оставаться легкодоступным до тех пор, пока пользователь не активирует или не отклонит уведомление.
Это может показаться странным, но это означает, что если не указано иное, уведомление должно быть удалено из поля зрения через короткий промежуток времени.
Chrome 47 (бета-версия в октябре 2015 г.) теперь поддерживает параметр requireInteraction . Если он явно не указан и не установлен в true , все уведомления на рабочем столе будут отклонены примерно через 20 секунд . Интересно, что Chrome недавно удалил Центр уведомлений со всех настольных платформ (кроме ChromeOS), это означает, что минимизированные уведомления считаются отклоненными и недоступны в вызове getNotifications в service worker.
В Chrome для Android параметр requireInteraction игнорируется, поскольку уведомления свернуты в области уведомлений.
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'
});
});
}
});
}