We hebben veel geleerd sinds meldingen en pushberichten in Chrome beschikbaar kwamen. Een specifieke feedback over desktopapparaten was dat meldingen zichtbaar bleven op het scherm van de gebruiker totdat de gebruiker ze actief verwijderde.
Wanneer de pagina geopend is, is het mogelijk om een eenvoudige JavaScript-timer te maken die de melding automatisch sluit. Maar we leven nu in een wereld met service workers: waar webapps langer dan een venster meegaan en de service workers zo snel mogelijk in slaapstand worden gezet om resources te besparen. Dit betekent dat we een andere manier nodig hebben om een goede gebruikerservaring te creëren.
De Meldingsspecificatie is onlangs bijgewerkt, zodat ontwikkelaars kunnen aangeven dat de melding niet automatisch door het systeem moet worden verwijderd .
Een melding heeft een bijbehorende vlag voor interactie-voorkeur die in eerste instantie niet is ingesteld. Wanneer deze is ingesteld, geeft dit aan dat de melding op apparaten met een voldoende groot scherm direct beschikbaar moet blijven totdat de gebruiker de melding activeert of verwijdert.
Dit lijkt misschien vreemd, maar wat het betekent is dat de melding na een korte tijd verwijderd moet worden, tenzij anders aangegeven.
Chrome 47 (bètaversie in oktober 2015) ondersteunt nu de optie requireInteraction . Tenzij deze expliciet is opgegeven en ingesteld op true , worden alle meldingen op de desktop na ongeveer 20 seconden verwijderd. Het interessante is echter dat Chrome onlangs het Berichtencentrum van alle desktopplatforms (behalve ChromeOS) heeft verwijderd. Dit betekent dat geminimaliseerde meldingen als verwijderd worden beschouwd en niet toegankelijk zijn in een aanroep van getNotifications in een service worker.
In Chrome voor Android wordt de optie requireInteraction genegeerd, omdat de meldingen in het meldingenvak geminimaliseerd zijn.
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'
});
});
}
});
}