Verbeteringen in webmeldingen in Chrome 50: pictogrammen, gebeurtenissen sluiten, voorkeuren en tijdstempels opnieuw melden

Met PPush-meldingen kunt u uw gebruikers een geweldige app-achtige ervaring bieden, waarbij u hen op de hoogte stelt van belangrijke en tijdige updates, zoals inkomende chatberichten. Het notificatieplatform is relatief nieuw in browsers en naarmate er steeds meer gebruiksscenario’s en vereisten worden uitgewerkt, zien we veel toevoegingen aan de API’s voor notificaties. Chrome 50 (bèta maart 2016) is daarop geen uitzondering, met maar liefst vier nieuwe features die ontwikkelaars meer controle geven over meldingen. Je krijgt de mogelijkheid om:

  • pictogrammen toevoegen aan meldingsknoppen,
  • wijzig de tijdstempel om een ​​consistente ervaring te creëren,
  • volg gebeurtenissen voor het sluiten van meldingen om meldingen te helpen synchroniseren en analyses te bieden,
  • beheer de renotify-ervaring wanneer een melding de momenteel weergegeven melding vervangt.

Chrome 50 heeft ook Payloads voor pushmeldingen toegevoegd. Als u op de hoogte wilt blijven van de Notifications API zoals deze in Chrome is geïmplementeerd, volgt u de specificaties en de spec issue tracker .

Maak aantrekkelijke actieknoppen met aangepaste pictogrammen

In een recent bericht over actieknoppen voor meldingen in Chrome 49 heb ik gezegd dat je geen afbeeldingen aan meldingsknoppen kunt toevoegen om ze hip en aantrekkelijk te maken, maar dat je Unicode-tekens kunt gebruiken om emoji's enz. inline te plaatsen. Nu hoef je dat niet te doen zorgen: met deze recente toevoeging kun je nu een afbeelding opgeven op 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'}]
});
Bureaubladmelding

Het uiterlijk van het actiepictogram verschilt per platform. Op Android heeft het pictogram bijvoorbeeld een donkergrijs filter toegepast in Lollipop en hoger, en een wit filter vóór Lollipop, terwijl het op de desktop volledig in kleur is. (Opmerking: er is discussie over de toekomst hiervan op de desktop .) Sommige platforms kunnen mogelijk niet eens actiepictogrammen weergeven, dus zorg ervoor dat u de pictogrammen gebruikt om context aan de actie te geven en niet als enige indicator van de bedoeling. .

En ten slotte, omdat de bronnen moeten worden gedownload, is het een goede gewoonte om de pictogrammen zo klein mogelijk te houden en ze vooraf in de cache te plaatsen tijdens uw installatiegebeurtenis. (Ten tijde van dit schrijven worden de ophaalacties van meldingsbronnen in Chrome nog niet via de servicemedewerker gerouteerd.)

Melding sluitingsgebeurtenissen

Een veelgevraagde functie van meldingen is de mogelijkheid om te weten wanneer de gebruiker een melding heeft afgewezen. We konden dat niet doen totdat een recente reeks wijzigingen in de meldingsspecificatie een notificatieclose-gebeurtenis toevoegde.

Door de notificatieklik en de notificatieclose-gebeurtenis te gebruiken, kunt u begrijpen hoe uw gebruikers omgaan met uw meldingen. Laten ze ze lange tijd openstaan ​​en wijzen ze ze vervolgens actief af, of handelen ze er meteen naar.

Een populair gebruiksscenario is het kunnen 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 stil te doen (onthoud dat bij elk pushbericht een melding moet worden weergegeven), maar door het gebruik van notificatieclose biedt dit de mogelijkheid om dit af te handelen doordat u de meldingsstatus van de gebruiker op uw server kunt volgen en synchroniseer dat met de andere apparaten terwijl de gebruiker ze gebruikt.

Om de notificatieclose-gebeurtenis te gebruiken, registreert u deze bij uw servicemedewerker. Deze wordt alleen geactiveerd wanneer de gebruiker actief een melding heeft gesloten, bijvoorbeeld als de gebruiker een specifieke melding negeert of alle meldingen in zijn lade negeert (op Android).

Als de vlag requireInteraction false is of niet is ingesteld, wordt de gebeurtenis notificatieclose niet geactiveerd als de melding niet handmatig door de gebruiker wordt afgewezen, maar in plaats daarvan automatisch door het systeem.

Een eenvoudige implementatie wordt hieronder weergegeven. Wanneer de gebruiker de melding negeert, krijgt u toegang tot het meldingsobject van waaruit u aangepaste logica kunt uitvoeren.

self.addEventListener('notificationclose', e => console.log(e.notification));

U kunt dit testen in de Notificatiegenerator ; u krijgt een waarschuwing wanneer u de melding sluit.

Irriteer uw gebruikers niet wanneer u een bestaande melding vervangt

Ik ben er vrij zeker van dat oom Ben het had over het meldingssysteem en niet over de bevoegdheden van Peter Parker toen hij zei: "Met grote macht komt grote verantwoordelijkheid". Het notificatiesysteem is een krachtig medium voor interactie met gebruikers. Als je hun vertrouwen misbruikt, zullen ze alle meldingen uitschakelen en kun je ze volledig kwijtraken.

Wanneer u een melding maakt, kunt u deze zo instellen dat er een geluidssignaal ontstaat of trilt om de aandacht van de gebruiker te trekken. Bovendien kunt u een bestaande melding vervangen door het kenmerk 'tag' opnieuw te gebruiken voor een nieuw meldingsobject.

Vóór Chrome 50 werd er elke keer dat u een melding maakte of een bestaande melding verving, een trilpatroon weergegeven of een geluidssignaal afgespeeld, wat frustratie bij uw gebruikers kon veroorzaken. Nu heb je in Chrome 50 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 stil zijn en als ontwikkelaar moet u zich aanmelden om de gebruiker "opnieuw op de hoogte te stellen" door de vlag in te stellen op "true".

self.registration.showNotification('Oi!', {
  'renotify': true,
  'tag': 'tag-id-1'
});

U kunt dit uitproberen in de Notificatiegenerator .

Beheer de tijdstempel die aan de gebruiker wordt weergegeven

Op Android tonen de meldingen van Chrome standaard de aanmaaktijden in de rechterbovenhoek. Helaas is dit mogelijk niet het tijdstip waarop de melding daadwerkelijk door uw systeem is gegenereerd. De gebeurtenis kan bijvoorbeeld zijn geactiveerd toen het apparaat offline was, of de melding kon 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 melding moet worden weergegeven.

self.registration.showNotification('Best day evar!', {
  'timestamp': 360370800000
});

De tijdstempel is momenteel alleen zichtbaar in Chrome voor Android. Hoewel het niet zichtbaar is op desktop, heeft het invloed op de notificatievolgorde op zowel mobiel als desktop.