Wir haben viel gelernt, seit Benachrichtigungen und Push-Mitteilungen in Chrome eingeführt wurden. Ein bestimmtes Feedback zu Geräten der Desktopklasse bezog sich darauf, dass Benachrichtigungen auf dem Display des Nutzers sichtbar bleiben, bis sie von ihm aktiv geschlossen werden.
Wenn die Seite geöffnet ist, können Sie einen einfachen JavaScript-Timer erstellen, der die Benachrichtigung automatisch schließt. Aber wir leben jetzt in einer Welt mit Service Workern: Web-Apps können die Lebensdauer eines Fensters überschreiten und die Service Worker werden so schnell wie möglich in den Ruhemodus versetzt, um Ressourcen zu sparen. Das bedeutet, dass wir eine andere Möglichkeit brauchen, um eine gute User Experience zu schaffen.
Die Benachrichtigungsspezifikation wurde vor Kurzem aktualisiert, damit Entwickler angeben können, dass die Benachrichtigung nicht automatisch vom System geschlossen werden soll.
Eine Benachrichtigung ist mit einem Flag für die Einstellung „Interaktion erforderlich“ verknüpft, das standardmäßig deaktiviert ist. Wenn diese Option aktiviert ist, sollte die Benachrichtigung auf Geräten mit einem ausreichend großen Display so lange verfügbar bleiben, bis der Nutzer sie aktiviert oder schließt.
Das mag seltsam erscheinen, bedeutet aber, dass die Benachrichtigung nach kurzer Zeit ausgeblendet werden sollte, sofern nicht anders angegeben.
Chrome 47 (Betaversion im Oktober 2015) unterstützt jetzt die Option requireInteraction. Sofern nicht explizit angegeben und auf true festgelegt, werden alle Benachrichtigungen auf dem Computer nach etwa 20 Sekunden geschlossen. Interessant ist jedoch, dass Chrome das Benachrichtigungscenter vor Kurzem von allen Desktop-Plattformen (außer ChromeOS) entfernt hat. Das bedeutet, dass minimierte Benachrichtigungen als geschlossen betrachtet werden und nicht über einen Aufruf von getNotifications in einem Service Worker zugänglich sind.
In Chrome für Android werden die Benachrichtigungen im Benachrichtigungsbereich minimiert, sodass die Option requireInteraction ignoriert wird.
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'
});
});
}
});
}