Met PPush-meldingen kunt u uw gebruikers een geweldige app-achtige ervaring bieden door hen te waarschuwen voor belangrijke en tijdige updates, zoals inkomende chatberichten. Het meldingsplatform is relatief nieuw in browsers en naarmate er steeds meer use cases en vereisten worden uitgewerkt, zien we veel toevoegingen aan de API's voor meldingen. Chrome 50 (bètaversie in maart 2016) is daarop geen uitzondering, met maar liefst vier nieuwe functies die ontwikkelaars meer controle geven over meldingen. U krijgt de mogelijkheid om:
- pictogrammen toevoegen aan meldingsknoppen,
- Pas het tijdstempel aan om een consistente ervaring te creëren,
- Volg gebeurtenissen voor het sluiten van meldingen om meldingen te synchroniseren en analyses te bieden,
- de renotify-ervaring beheren wanneer een melding de momenteel weergegeven melding vervangt.
Chrome 50 heeft ook payloads voor pushmeldingen toegevoegd. Om op de hoogte te blijven van de Notifications API zoals deze in Chrome is geïmplementeerd, volgt u de specificaties en de specificatie-issuetracker .
Maak aantrekkelijke actieknoppen met aangepaste pictogrammen
In een recent bericht over meldingsactieknoppen in Chrome 49 vermeldde ik dat je geen afbeeldingen aan meldingsknoppen kunt toevoegen om ze er flitsend en aantrekkelijk uit te laten zien, maar je kunt wel Unicode-tekens gebruiken voor inline-emoji's en dergelijke. Nu hoef je je geen zorgen meer te maken: met deze recente toevoeging kun je nu een afbeelding opgeven voor de actieknop:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
De weergave van het actie-icoon verschilt per platform. Op Android heeft het icoon bijvoorbeeld een donkergrijs filter in Lollipop en hoger, en een wit filter vóór Lollipop, terwijl het op desktop volledig in kleur is. (Opmerking: er is discussie over de toekomst hiervan op desktop .) Sommige platforms kunnen mogelijk helemaal geen actie-icoon weergeven, dus zorg ervoor dat je de iconen gebruikt om context te geven aan de actie en niet als enige indicator van de intentie.
En tot slot, omdat de bronnen gedownload moeten worden, is het een goede gewoonte om de pictogrammen zo klein mogelijk te houden en ze vooraf in de cache van uw installatie op te slaan. (Op het moment dat dit werd geschreven, werden de bronnen voor meldingen in Chrome nog niet via de service worker opgehaald.)
Melding van gesloten gebeurtenissen
Een veelgevraagde functie voor meldingen is de mogelijkheid om te zien wanneer de gebruiker een melding heeft gesloten. We hadden geen mogelijkheid om dit te doen totdat een recente reeks wijzigingen in de meldingsspecificaties een 'notificationclose'-gebeurtenis toevoegde.
Met de gebeurtenissen notificationclick en notificationclose krijgt u inzicht in hoe uw gebruikers met uw meldingen omgaan. Laten ze ze lang openstaan en sluiten ze ze vervolgens actief af, of reageren ze er direct op.
Een populaire use case is het synchroniseren van meldingen tussen apparaten. Als de gebruiker een melding op zijn desktopapparaat negeert, moet dezelfde melding op zijn mobiele apparaat ook worden genegeerd. We hebben nog niet de mogelijkheid om dit stilzwijgend te doen (onthoud dat elk pushbericht een melding moet bevatten), maar met notificationclose krijgt u de mogelijkheid om dit te doen. U kunt de meldingsstatus van de gebruiker op uw server volgen en synchroniseren met de andere apparaten terwijl de gebruiker ze gebruikt.
Als u de gebeurtenis notificationclose wilt gebruiken, registreert u deze in uw service worker. De gebeurtenis wordt dan alleen geactiveerd wanneer de gebruiker actief een melding heeft genegeerd, bijvoorbeeld als de gebruiker een specifieke melding negeert of alle meldingen in zijn of haar systeemvak (op Android).
Als de vlag requireInteraction false is of niet is ingesteld, wordt de gebeurtenis notificationclose niet geactiveerd als de melding niet handmatig door de gebruiker wordt verwijderd, maar automatisch door het systeem.
Een eenvoudige implementatie wordt hieronder getoond. Wanneer de gebruiker de melding negeert, krijgt u toegang tot het meldingsobject waarmee u aangepaste logica kunt uitvoeren.
self.addEventListener('notificationclose', e => console.log(e.notification));
U kunt dit testen in de Meldingsgenerator ; u krijgt dan een waarschuwing wanneer u de melding sluit.
Maak uw gebruikers niet boos als u een bestaande melding vervangt
Ik ben er vrij zeker van dat Uncle Ben het over het notificatiesysteem had en niet over de bevoegdheden van Peter Parker toen hij zei: "Met grote macht komt grote verantwoordelijkheid." Het notificatiesysteem is een krachtig medium om met gebruikers te communiceren. Als je hun vertrouwen misbruikt, schakelen ze alle notificaties uit en kun je ze helemaal kwijtraken.
Wanneer u een melding aanmaakt, kunt u deze instellen op een hoorbaar signaal of trillen om de aandacht van de gebruiker te trekken. Daarnaast kunt u een bestaande melding vervangen door het 'tag'-kenmerk opnieuw te gebruiken voor een nieuw meldingsobject.
Vóór Chrome 50 werd er elke keer dat u een melding aanmaakte of een bestaande verving, een trilpatroon afgespeeld of een hoorbaar signaal afgespeeld. Dit kon tot frustratie leiden bij uw gebruikers. In Chrome 50 hebt u nu controle over wat er gebeurt tijdens het opnieuw melden via een eenvoudige Booleaanse vlag genaamd 'renotify'. Het nieuwe standaardgedrag bij het gebruik van dezelfde 'tag' voor volgende meldingen is om stil te zijn. Als ontwikkelaar moet u ervoor kiezen om de gebruiker opnieuw te melden door de vlag op 'true' te zetten.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
U kunt dit uitproberen in de Meldingsgenerator .
Beheer het tijdstempel dat aan de gebruiker wordt weergegeven
Op Android worden de notificaties van Chrome standaard rechtsboven weergegeven. Helaas is dit mogelijk niet het tijdstip waarop de notificatie daadwerkelijk door uw systeem is gegenereerd. De gebeurtenis kan bijvoorbeeld zijn geactiveerd toen het apparaat offline was, of de notificatie kan worden weergegeven voor een aanstaande vergadering. Vanaf Chrome 50 heeft Chrome een nieuwe ' timestamp' -eigenschap toegevoegd waarmee ontwikkelaars de tijd kunnen opgeven die in de notificatie moet worden weergegeven.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Het tijdstempel is momenteel alleen zichtbaar in Chrome voor Android. Hoewel het niet zichtbaar is op desktop, heeft het wel invloed op de volgorde van meldingen op zowel mobiel als desktop.