Уведомление requireInteraction — более плавный интерфейс уведомлений на рабочем столе

Мы многому научились с тех пор, как уведомления и push-сообщения появились в Chrome. Одним из конкретных отзывов об устройствах класса настольных компьютеров было то, что уведомления оставались и были видны на экране пользователя до тех пор, пока пользователь их не отклонил.

Когда страница открыта, можно создать простой таймер JavaScript, который автоматически закроет уведомление. Но сейчас мы живем в мире, где есть сервис-воркеры: где веб-приложения могут жить дольше срока жизни окна, а сервис-воркеры уходят в сон как можно быстрее для экономии ресурсов. Это означает, что нам нужен другой способ создать хороший опыт для пользователей.

Спецификация уведомлений была недавно обновлена, чтобы дать разработчику возможность указать, что уведомление не должно автоматически отклоняться системой .

Уведомление имеет связанный с ним флаг предпочтения взаимодействия, который изначально не установлен. Если этот параметр установлен, это означает, что на устройствах с достаточно большим экраном уведомление должно оставаться доступным до тех пор, пока пользователь не активирует или не закроет уведомление.

Это может показаться странным, но это означает, что, если не указано иное, уведомление должно быть удалено из поля зрения через короткий период времени.

Chrome 47 (бета-версия выпущена в октябре 2015 г.) теперь поддерживает опцию requireInteraction . Если это не указано явно и не установлено значение true , все уведомления на рабочем столе будут закрыты примерно через 20 секунд . Однако интересно то, что Chrome недавно удалил Центр уведомлений со всех настольных платформ (кроме ChromeOS). Это означает, что свернутые уведомления считаются отклоненными и недоступными при вызове getNotifications в сервисном работнике.

В 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'
        });
        });
    }
    });
}

Попробуйте демо .