We hebben veel geleerd sinds meldingen en pushberichten in Chrome zijn geland. Een specifiek stukje feedback over apparaten uit de Desktop-klasse was dat meldingen op het scherm van de gebruiker bleven staan totdat ze actief werden genegeerd door de gebruiker.
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 servicemedewerkers: waar webapps de levensduur van een raam kunnen verlengen en de servicemedewerkers zo snel mogelijk in slaap worden gebracht om hulpbronnen te besparen. Dit betekent dat we een andere manier nodig hebben om een goede ervaring voor gebruikers te creëren.
De meldingsspecificatie is onlangs bijgewerkt om de ontwikkelaar de mogelijkheid te geven aan te geven dat de melding niet automatisch door het systeem mag worden genegeerd .
Een melding heeft een bijbehorende voorkeursvlag voor interactie vereisen, die aanvankelijk niet is ingesteld. Indien ingesteld, geeft dit aan dat op apparaten met een voldoende groot scherm de melding direct beschikbaar moet blijven totdat de gebruiker de melding activeert of negeert.
Dit lijkt misschien vreemd, maar het houdt in dat, tenzij anders aangegeven, de melding na korte tijd uit het zicht moet worden verwijderd.
Chrome 47 (bèta in oktober 2015) ondersteunt nu de optie requireInteraction . Tenzij dit expliciet wordt vermeld en op true is ingesteld, worden alle meldingen op het bureaublad 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 afgewezen worden beschouwd en niet toegankelijk zijn in een oproep om getNotifications bij een servicemedewerker.
In Chrome voor Android wordt de optie requireInteraction genegeerd, omdat de meldingen in het meldingenvak worden geminimaliseerd.
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'
});
});
}
});
}