Begin 2015 hebben we pushberichten en meldingen geïntroduceerd in Chrome voor Android en desktop. Het was een grote stap voorwaarts op internet. Gebruikers zouden zich dieper kunnen verdiepen in ervaringen op internet, zelfs als de browser gesloten was.
Hoewel het geweldig is dat u deze berichten kunt verzenden, was het enige dat u ermee kon doen, erop klikken en een pagina openen, of deze helemaal sluiten.
Als je kijkt naar de meldingen die standaard worden geleverd aan apps op mobiele platforms zoals iOS en Android, laten ze de ontwikkelaar elk contextuele acties definiëren die de gebruiker kan aanroepen en waarmee hij kan communiceren. In Chrome 48 hebben we nu een vergelijkbare mogelijkheid toegevoegd aan webmeldingen op desktop en Chrome voor Android.
De toevoeging aan de API is vrij eenvoudig. U hoeft alleen maar een reeks acties te maken en deze toe te voegen aan het NotificationOptions object wanneer u showNotification aanroept vanuit een ServiceWorker-registratie (hetzij rechtstreeks in de ServiceWorker of op een pagina via navigator.serviceWorker.ready ).
Momenteel ondersteunt Chrome slechts twee acties per melding . Sommige platforms kunnen mogelijk meer ondersteunen, en sommige platforms ondersteunen mogelijk minder of helemaal geen. U kunt bepalen wat het platform ondersteunt door Notification.maxActions aan te vinken. In de volgende voorbeelden gaan we ervan uit dat het platform twee acties ondersteunt.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
Hierdoor wordt een eenvoudige melding gemaakt met twee knoppen. Let op, het is ( nog ) niet mogelijk om direct iconen aan de actie toe te voegen, maar je kunt Emoji en de uitgebreide Unicode-tekenset gebruiken om meer context aan je notificatieknoppen toe te voegen.
Bijvoorbeeld:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Nu je een melding hebt gemaakt en deze hebt laten lijken op 😻, kan de gebruiker op een bepaald moment in de toekomst interactie hebben met de melding. Interacties met de melding komen momenteel (vanaf Chrome 48) allemaal via de notificationclick die is geregistreerd in uw servicemedewerker en kunnen een algemene klik op de melding zijn of een specifieke tik op een van de actieknoppen. Kanttekening: in de toekomst kun je ook reageren op de notificatieclose -gebeurtenis .
Om te begrijpen welke actie de gebruiker heeft ondernomen, moet u de action eigenschap van de gebeurtenis inspecteren. Vervolgens heeft u de keuze om een nieuwe pagina te openen zodat de gebruiker een actie kan voltooien of om de taak op de achtergrond uit te voeren.
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
Het interessante is dat de acties geen nieuw venster hoeven te openen; ze kunnen algemene applicatie-interacties uitvoeren zonder een gebruikersinterface te creëren. Een gebruiker kan bijvoorbeeld een bericht op sociale media 'leuk vinden' of 'verwijderen' dat de actie uitvoert op de lokale gegevens van de gebruiker en dit vervolgens synchroniseren met de cloud zonder een gebruikersinterface te openen (hoewel het een goede gewoonte is om de wijziging in de gegevens door te geven aan alle geopende vensters zodat de gebruikersinterface kan worden bijgewerkt). Voor een actie waarvoor gebruikersinteractie vereist is, opent u een venster waarin de gebruiker kan antwoorden.
Omdat platforms niet hetzelfde aantal acties ondersteunen, of in sommige gevallen helemaal geen meldingsactieknoppen kunnen ondersteunen, moet u ervoor zorgen dat u altijd een verstandige terugval biedt op een taak die u van de gebruiker zou verwachten. doen als ze gewoon op de melding klikken.
Als je dit vandaag nog in actie wilt zien, bekijk dan de Notification Test Harne 's van Peter Beverloo en lees de Notifications-specificatie of volg de specificaties terwijl deze worden bijgewerkt .