Seit Benachrichtigungen und Push-Messaging in Chrome eingeführt wurden, haben wir viel gelernt. Ein konkretes Feedback zu Geräten der Desktopklasse war, dass Benachrichtigungen auf dem Bildschirm des Nutzers sichtbar bleiben, bis sie aktiv vom Nutzer geschlossen werden.
Wenn die Seite geöffnet ist, kann ein einfacher JavaScript-Timer erstellt werden, der die Benachrichtigung automatisch schließt. Aber wir leben jetzt in einer Welt mit Service Workern, in der Web-Apps über die Lebensdauer eines Fensters hinaus aktiv sein können und die Service Worker so schnell wie möglich in den Ruhezustand versetzt werden, um Ressourcen zu sparen. Wir brauchen also eine andere Möglichkeit, um Nutzern eine gute Erfahrung zu bieten.
Die Benachrichtigungsspezifikation wurde vor Kurzem aktualisiert, damit Entwickler angeben können, dass die Benachrichtigung nicht automatisch vom System geschlossen werden soll.
Einer Benachrichtigung ist ein Flag für die Interaktionseinstellung „require interaction“ zugeordnet, das anfangs nicht festgelegt ist. Wenn festgelegt, gibt dies an, dass die Benachrichtigung auf Geräten mit einem ausreichend großen Bildschirm leicht zugänglich bleiben sollte, bis der Nutzer sie aktiviert oder schließt.
Das mag seltsam erscheinen, bedeutet aber, dass die Benachrichtigung nach kurzer Zeit aus dem Blickfeld verschwinden sollte, sofern nichts anderes angegeben ist.
Chrome 47 (Betaversion im Oktober 2015) unterstützt jetzt die Option requireInteraction. Sofern nicht explizit angegeben und auf true gesetzt, werden alle Benachrichtigungen auf dem Desktop nach etwa 20 Sekunden geschlossen. Interessant ist jedoch, dass Chrome das Benachrichtigungscenter kürzlich von allen Desktop-Plattformen (außer ChromeOS) entfernt hat. Das bedeutet, dass minimierte Benachrichtigungen als geschlossen gelten und in einem Aufruf von getNotifications in einem Service Worker nicht zugänglich sind.
In Chrome für Android werden Benachrichtigungen im Benachrichtigungsbereich minimiert. Die Option requireInteraction wird daher ignoriert.
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'
});
});
}
});
}