Begin 2015 introduceerden we pushberichten en meldingen in Chrome voor Android en desktop. Dit was een enorme stap voorwaarts op het web. Gebruikers konden nu dieper ingaan op webervaringen, zelfs wanneer de browser gesloten was.
Het is geweldig dat je dit soort berichten kunt versturen, maar het enige dat je ermee kon doen, was erop klikken en een pagina openen of het helemaal sluiten.
Kijk maar naar de meldingen die standaard worden aangeboden in apps op mobiele platforms zoals iOS en Android. Ze laten de ontwikkelaar contextuele acties definiëren die de gebruiker kan aanroepen en waarmee hij kan interacteren. In Chrome 48 hebben we nu een vergelijkbare mogelijkheid toegevoegd aan webmeldingen voor desktop en Chrome voor Android.
De toevoeging aan de API is vrij eenvoudig. U hoeft alleen maar een array met acties te maken en deze toe te voegen aan het NotificationOptions object wanneer u showNotification aanroept vanuit een ServiceWorker-registratie (rechtstreeks in de ServiceWorker of op een pagina via navigator.serviceWorker.ready ).
Momenteel ondersteunt Chrome slechts twee acties per melding . Sommige platforms ondersteunen er mogelijk meer, en andere minder of helemaal geen. U kunt bepalen welke acties het platform ondersteunt door Notification.maxActions te controleren. 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'}]
});
Dit creëert een eenvoudige melding met twee knoppen. Let op: het is ( nog ) niet mogelijk om pictogrammen rechtstreeks aan de actie toe te voegen, maar je kunt emoji en de uitgebreide Unicode-tekenset gebruiken om meer context aan je meldingsknoppen 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 aangemaakt en deze er 😻 uitziet, kan de gebruiker in de toekomst op de melding reageren. Interacties met de melding verlopen momenteel (vanaf Chrome 48) via de notificationclick -gebeurtenis die is geregistreerd in je service worker. Dit kan een algemene klik op de melding zijn of een specifieke tik op een van de actieknoppen. Terzijde: in de toekomst kun je ook reageren op de 'notificationclose' -gebeurtenis .
Om te begrijpen welke actie de gebruiker heeft uitgevoerd, moet u de action eigenschap van de gebeurtenis bekijken. Vervolgens kunt u ervoor kiezen om een nieuwe pagina te openen waarop 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 "liken" of "verwijderen". De actie wordt dan uitgevoerd op de lokale gegevens van de gebruiker en vervolgens gesynchroniseerd met de cloud zonder een gebruikersinterface te openen (hoewel het een goede gewoonte is om de gegevenswijziging te melden in alle geopende vensters, zodat de gebruikersinterface kan worden bijgewerkt). Voor een actie die gebruikersinteractie vereist, opent u een venster waarin de gebruiker kan reageren.
Omdat platforms niet hetzelfde aantal acties ondersteunen of in sommige gevallen helemaal geen knoppen voor meldingsacties ondersteunen, moet u ervoor zorgen dat u altijd een redelijke terugvaloptie biedt voor een taak. Dit is wat u van de gebruiker verwacht als hij of zij op de melding klikt.
Als u dit vandaag nog in actie wilt zien, bekijk dan Peter Beverloo's Notification Test Hardware en lees de Notifications-specificatie of blijf op de hoogte van de specificaties terwijl deze worden bijgewerkt .
,
Begin 2015 introduceerden we pushberichten en meldingen in Chrome voor Android en desktop. Dit was een enorme stap voorwaarts op het web. Gebruikers konden nu dieper ingaan op webervaringen, zelfs wanneer de browser gesloten was.
Het is geweldig dat je dit soort berichten kunt versturen, maar het enige dat je ermee kon doen, was erop klikken en een pagina openen of het helemaal sluiten.
Kijk maar naar de meldingen die standaard worden aangeboden in apps op mobiele platforms zoals iOS en Android. Ze laten de ontwikkelaar contextuele acties definiëren die de gebruiker kan aanroepen en waarmee hij kan interacteren. In Chrome 48 hebben we nu een vergelijkbare mogelijkheid toegevoegd aan webmeldingen voor desktop en Chrome voor Android.
De toevoeging aan de API is vrij eenvoudig. U hoeft alleen maar een array met acties te maken en deze toe te voegen aan het NotificationOptions object wanneer u showNotification aanroept vanuit een ServiceWorker-registratie (rechtstreeks in de ServiceWorker of op een pagina via navigator.serviceWorker.ready ).
Momenteel ondersteunt Chrome slechts twee acties per melding . Sommige platforms ondersteunen er mogelijk meer, en andere minder of helemaal geen. U kunt bepalen welke acties het platform ondersteunt door Notification.maxActions te controleren. 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'}]
});
Dit creëert een eenvoudige melding met twee knoppen. Let op: het is ( nog ) niet mogelijk om pictogrammen rechtstreeks aan de actie toe te voegen, maar je kunt emoji en de uitgebreide Unicode-tekenset gebruiken om meer context aan je meldingsknoppen 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 aangemaakt en deze er 😻 uitziet, kan de gebruiker in de toekomst op de melding reageren. Interacties met de melding verlopen momenteel (vanaf Chrome 48) via de notificationclick -gebeurtenis die is geregistreerd in je service worker. Dit kan een algemene klik op de melding zijn of een specifieke tik op een van de actieknoppen. Terzijde: in de toekomst kun je ook reageren op de 'notificationclose' -gebeurtenis .
Om te begrijpen welke actie de gebruiker heeft uitgevoerd, moet u de action eigenschap van de gebeurtenis bekijken. Vervolgens kunt u ervoor kiezen om een nieuwe pagina te openen waarop 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 "liken" of "verwijderen". De actie wordt dan uitgevoerd op de lokale gegevens van de gebruiker en vervolgens gesynchroniseerd met de cloud zonder een gebruikersinterface te openen (hoewel het een goede gewoonte is om de gegevenswijziging te melden in alle geopende vensters, zodat de gebruikersinterface kan worden bijgewerkt). Voor een actie die gebruikersinteractie vereist, opent u een venster waarin de gebruiker kan reageren.
Omdat platforms niet hetzelfde aantal acties ondersteunen of in sommige gevallen helemaal geen knoppen voor meldingsacties ondersteunen, moet u ervoor zorgen dat u altijd een redelijke terugvaloptie biedt voor een taak. Dit is wat u van de gebruiker verwacht als hij of zij op de melding klikt.
Als u dit vandaag nog in actie wilt zien, bekijk dan Peter Beverloo's Notification Test Hardware en lees de Notifications-specificatie of blijf op de hoogte van de specificaties terwijl deze worden bijgewerkt .