Od wprowadzenia powiadomień i komunikatów push w Chrome sporo się dowiedzieliśmy. Jedną z najważniejszych uwag na temat urządzeń klasy komputerowej było to, że powiadomienia pozostawały na ekranie i były widoczne na ekranie do momentu, gdy użytkownik je aktywnie zamknie.
Po otwarciu strony można utworzyć prosty licznik czasu JavaScript, który automatycznie zamyka powiadomienie. Żyjemy jednak w świecie z mechanizmami Service Worker, w których aplikacje internetowe mogą żyć nawet po upływie określonego czasu, a pracownicy usługowi są uśpione tak szybko, jak to możliwe, aby oszczędzać zasoby. Oznacza to, że potrzebujemy innego sposobu na zapewnienie użytkownikom dobrych wrażeń.
Specyfikacja powiadomień została niedawno zaktualizowana, aby umożliwić deweloperowi wskazanie, że powiadomienie nie powinno zostać automatycznie zamknięte przez system.
Powiadomienie ma powiązaną flagę wymagania interakcji, która jest początkowo nieskonfigurowana. Po ustawieniu wskazuje, że na urządzeniach z wystarczająco dużym ekranem powiadomienie powinno być łatwo dostępne, dopóki użytkownik go nie aktywuje lub odrzuci.
Może się to wydawać dziwne, ale oznacza, że o ile nie podano inaczej, powiadomienie powinno zostać usunięte po krótkim czasie.
Chrome 47 (wersja beta z października 2015 r.) obsługuje teraz opcję requireInteraction. Jeśli nie określono wyraźnie oraz wartości true, wszystkie powiadomienia na komputerach zostaną zamknięte po około 20 sekundach. Interesujące jest jednak to, że w Chrome niedawno usunęliśmy Centrum powiadomień ze wszystkich platform komputerowych (oprócz ChromeOS), co oznacza, że zminimalizowane powiadomienia są uznawane za zamknięte i nie są dostępne w wywołaniu funkcji getNotifications w skrypcie service worker.
W Chrome na Androida powiadomienia są zminimalizowane w obszarze powiadomień, więc opcja requireInteraction jest ignorowana.
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'
});
});
}
});
}