Od czasu wprowadzenia powiadomień i wiadomości push w Chrome nauczyliśmy się wielu rzeczy. W jednym z opinii dotyczących urządzeń klasy komputerów stacjonarnych użytkownicy zgłaszali, że powiadomienia pozostają widoczne na ekranie, dopóki użytkownik nie zamknie ich aktywnie.
Gdy strona jest otwarta, można utworzyć prosty licznik JavaScript, który automatycznie zamknie powiadomienie. Obecnie jednak żyjemy w świecie, w którym działają serwisy worker: aplikacje internetowe mogą działać dłużej niż czas trwania okna, a serwisy worker są jak najszybciej przenoszone w stan uśpienia, aby oszczędzać zasoby. Oznacza to, że musimy znaleźć inny sposób na zapewnienie użytkownikom wygodnej obsługi.
Specyfikacja powiadomień została niedawno zaktualizowana, aby umożliwić deweloperom wskazanie, że powiadomienie nie powinno być automatycznie odrzucane przez system.
Powiadomienie ma powiązany z nim parametr wymagaj interakcji, który jest początkowo nieaktywny. Gdy jest ustawiona, oznacza, że na urządzeniach z wystarczająco dużym ekranem powiadomienie powinno być łatwo dostępne, dopóki użytkownik go nie aktywuje lub nie zamknie.
Może się to wydawać dziwne, ale oznacza to, że chyba że powiadomienie zostanie usunięte z widoku po krótkim czasie.
Chrome 47 (wersja beta z października 2015 r.) obsługuje teraz opcję requireInteraction. Jeśli nie zostanie wyraźnie podana i ustawiona na true, wszystkie powiadomienia na pulpicie zostaną zamknięte po około 20 sekundach. Ciekawostką jest to, że Chrome niedawno usunął Centrum powiadomień ze wszystkich platform komputerowych (z wyjątkiem ChromeOS). Oznacza to, że zminimalizowane powiadomienia są uważane za zamknięte i nie są dostępne w wywołaniu getNotificationsw ramach workera usługi.
W Chrome na Androidzie powiadomienia są zminimalizowane w obszarze zasobnika 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'
});
});
}
});
}