Badges voor app-pictogrammen, Badges voor app-pictogrammen

Met de App Badging API kunnen geïnstalleerde web-apps een applicatiebrede badge op het app-pictogram instellen.

Pete LePage

Wat is de app-badging-API?

Voorbeeld van Twitter met acht meldingen en een andere app met een badge van het vlagtype.

Met de App Badging API kunnen geïnstalleerde web-apps een badge voor de hele applicatie instellen, die wordt weergegeven op een besturingssysteemspecifieke plaats die aan de applicatie is gekoppeld (zoals de plank of het startscherm).

Badges maken het gemakkelijk om de gebruiker op subtiele wijze te informeren dat er nieuwe activiteit is die mogelijk zijn aandacht vereist, of om een ​​kleine hoeveelheid informatie aan te geven, zoals het aantal ongelezen berichten.

Badges zijn doorgaans gebruiksvriendelijker dan meldingen en kunnen met een veel hogere frequentie worden bijgewerkt, omdat ze de gebruiker niet onderbreken. En omdat ze de gebruiker niet onderbreken, hebben ze geen toestemming van de gebruiker nodig.

Mogelijke gebruiksscenario's

Voorbeelden van apps die deze API kunnen gebruiken zijn:

• Chat, e-mail en sociale apps om aan te geven dat er nieuwe berichten zijn binnengekomen of om het aantal ongelezen items weer te geven.
• Productiviteitsapps, om aan te geven dat een langlopende achtergrondtaak (zoals het renderen van een afbeelding of video) is voltooid.
• Spellen, om aan te geven dat een speleractie vereist is (bijvoorbeeld bij schaken, wanneer de speler aan de beurt is).

Steun

De App Badging API werkt op Windows en macOS, in Chrome 81 en Edge 81 of hoger. Ondersteuning voor ChromeOS is in ontwikkeling en zal beschikbaar zijn in een toekomstige release. Op Android wordt de Badge-API niet ondersteund. In plaats daarvan toont Android automatisch een badge op app-pictogram voor de geïnstalleerde web-app wanneer er een ongelezen melding is, net als voor Android-apps.

Probeer het

1. Open de App Badging API-demo .
2. Klik desgevraagd op Installeren om de app te installeren, of gebruik het Chrome-menu om de app te installeren.
3. Open het als een geïnstalleerde PWA. Let op: het moet worden uitgevoerd als een geïnstalleerde PWA (in uw taakbalk of dock).
4. Klik op de knop Instellen of Wissen om de badge via het app-pictogram in te stellen of te wissen. U kunt ook een nummer opgeven voor de Badge-waarde .

Hoe u de app-badging-API gebruikt

Als u de App Badging API wilt gebruiken, moet uw webapp voldoen aan de installeerbaarheidscriteria van Chrome en moeten gebruikers deze toevoegen aan hun startschermen.

De Badge API bestaat uit twee methoden in navigator :

• setAppBadge( number ) : Stelt de badge van de app in. Als er een waarde wordt opgegeven, stelt u de badge in op de opgegeven waarde, anders geeft u een effen witte stip weer (of een andere vlag, afhankelijk van het platform). number instellen op 0 is hetzelfde als het aanroepen van clearAppBadge() .
• clearAppBadge() : Verwijdert de badge van de app.

Beide retourneren loze beloftes die u kunt gebruiken voor foutafhandeling.

De badge kan worden ingesteld vanaf de huidige pagina of vanaf de geregistreerde servicemedewerker. Om de badge in te stellen of te wissen (op de voorgrondpagina of op de servicemedewerker), bel:

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

In sommige gevallen staat het besturingssysteem de exacte weergave van de badge mogelijk niet toe. In dergelijke gevallen zal de browser proberen de beste weergave voor dat apparaat te bieden. Omdat de Badging API bijvoorbeeld niet wordt ondersteund op Android, toont Android altijd alleen een punt in plaats van een numerieke waarde.

Ga er niet van uit hoe de user-agent de badge weergeeft. Sommige user agents kunnen een getal als "4000" nemen en dit herschrijven als "99+". Als u de badge zelf verzadigt (bijvoorbeeld door deze op "99" te zetten), verschijnt de "+" niet. Ongeacht het werkelijke aantal, roep gewoon setAppBadge(unreadCount) aan en laat de user-agent het overeenkomstig weergeven.

Hoewel de App Badging API in Chrome een geïnstalleerde app vereist, mag u de Badging API niet afhankelijk van de installatiestatus aanroepen. Roep gewoon de API aan als deze bestaat, omdat andere browsers de badge op andere plaatsen kunnen weergeven. Als het werkt, werkt het. Zo niet, dan gebeurt het gewoon niet.

Het instellen en wissen van de badge op de achtergrond door een servicemedewerker

U kunt de app-badge ook op de achtergrond instellen via de servicemedewerker. Doe dit via periodieke achtergrondsynchronisatie, de Push API of een combinatie van beide.

Periodieke achtergrondsynchronisatie

Met periodieke achtergrondsynchronisatie kan een servicemedewerker periodiek de server pollen, wat kan worden gebruikt om een ​​bijgewerkte status te verkrijgen, en navigator.setAppBadge() aanroepen.

De frequentie waarmee de synchronisatie wordt aangeroepen is echter niet volkomen betrouwbaar en wordt naar goeddunken van de browser genoemd.

Webpush-API

Met de Push API kunnen servers berichten sturen naar servicemedewerkers, die JavaScript-code kunnen uitvoeren, zelfs als er geen voorgrondpagina actief is. Een serverpush kan de badge dus bijwerken door navigator.setAppBadge() aan te roepen.

De meeste browsers, inclusief Chrome, vereisen echter dat er een melding wordt weergegeven wanneer een pushbericht wordt ontvangen. Dit is prima voor sommige gebruikssituaties (bijvoorbeeld het tonen van een melding bij het updaten van de badge), maar maakt het onmogelijk om de badge subtiel bij te werken zonder een melding weer te geven.

Bovendien moeten gebruikers uw sitemeldingsrechten verlenen om pushberichten te kunnen ontvangen.

Een combinatie van beide

Hoewel niet perfect, biedt het gebruik van Push API en periodieke achtergrondsynchronisatie samen een goede oplossing. Informatie met hoge prioriteit wordt geleverd via de Push API, waarbij een melding wordt weergegeven en de badge wordt bijgewerkt. En informatie met een lagere prioriteit wordt geleverd door de badge bij te werken, hetzij wanneer de pagina geopend is, hetzij via periodieke achtergrondsynchronisatie.

Feedback

Het Chrome-team wil graag horen wat uw ervaringen zijn met de App Badging API.

Vertel ons over het API-ontwerp

Is er iets in de API dat niet werkt zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heeft u een vraag of opmerking over het beveiligingsmodel?

• Dien een spec-probleem in op de Badging API GitHub-repository of voeg uw mening toe aan een bestaand probleem.

Meld een probleem met de implementatie

Heeft u een bug gevonden in de implementatie van Chrome? Of wijkt de uitvoering af van de specificaties?

• Dien een bug in op https://new.crbug.com . Zorg ervoor dat u zoveel mogelijk details opneemt, evenals eenvoudige instructies voor het reproduceren, en stel Componenten in op UI>Browser>WebAppInstalls . Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

Bent u van plan de App Badging API op uw site te gebruiken? Uw publieke steun helpt het Chrome-team prioriteiten te stellen voor functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

• Stuur een tweet naar @ChromiumDev met de hashtag #BadgingAPI en laat ons weten waar en hoe je deze gebruikt.

Handige Links

• Openbare uitlegger
• Specificaties ontwerp
• Badge-API-demo | Badge-API-demobron
• Tracking-bug
• ChromeStatus.com-invoer
• Knippercomponent: UI>Browser>WebAppInstalls

Heldenfoto door Prateek Katyal op Unsplash