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 plaatsen.

Pete LePage

Wat is de App Badging API?

Voorbeeld van Twitter met acht meldingen en een andere app die een vlagpictogram toont.
Voorbeeld van Twitter met acht meldingen en een andere app die een vlagpictogram toont.

Met de App Badging API kunnen geïnstalleerde webapps een applicatiebrede badge instellen. Deze badge wordt weergegeven op een besturingssysteemspecifieke plaats die aan de applicatie is gekoppeld (zoals het schap of het startscherm).

Met badges kunt u de gebruiker op een subtiele manier laten weten dat er nieuwe activiteit is die mogelijk zijn of haar aandacht vereist, of u kunt een kleine hoeveelheid informatie aangeven, zoals het aantal ongelezen berichten.

Badges zijn over het algemeen gebruiksvriendelijker dan meldingen en kunnen veel vaker worden bijgewerkt, omdat ze de gebruiker niet storen. En omdat ze de gebruiker niet storen, is er geen toestemming van de gebruiker nodig.

Mogelijke toepassingsgevallen

Voorbeelden van apps die deze API kunnen gebruiken zijn:

  • Chat, e-mail en sociale apps, om aan te geven dat er nieuwe berichten zijn, of om het aantal ongelezen berichten te tonen.
  • 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 speler actie moet ondernemen (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 in een toekomstige release beschikbaar zijn. Op Android wordt de Badging API niet ondersteund. In plaats daarvan toont Android automatisch een badge op het app-pictogram van de geïnstalleerde webapp wanneer er een ongelezen melding is, net als bij Android-apps.

Probeer het eens

  1. Open de App Badging API-demo .
  2. Wanneer u daarom wordt gevraagd, klikt u op Installeren om de app te installeren. U kunt ook het Chrome-menu gebruiken om de app te installeren.
  3. Open het als een geïnstalleerde PWA. Let op: het moet als een geïnstalleerde PWA draaien (in uw taakbalk of dock).
  4. Klik op de knop Instellen of Wissen om de badge in het app-pictogram in te stellen of te wissen. U kunt ook een getal opgeven voor de badgewaarde .

Hoe de App Badging API te gebruiken

Om de App Badging API te kunnen gebruiken, moet uw webapp voldoen aan de installeerbaarheidscriteria van Chrome en moeten gebruikers de app toevoegen aan hun startscherm.

De Badge API bestaat uit twee methoden in navigator :

  • setAppBadge( number ) : Stelt de badge van de app in. Als er een waarde is opgegeven, wordt de badge ingesteld op de opgegeven waarde. Anders wordt een effen witte stip weergegeven (of een andere vlag die geschikt is voor het platform). Het instellen van number op 0 is hetzelfde als het aanroepen van clearAppBadge() .
  • clearAppBadge() : Verwijdert de badge van de app.

Beide geven loze beloften die u kunt gebruiken voor foutbehandeling.

De badge kan worden ingesteld vanaf de huidige pagina of vanaf de geregistreerde service worker. Om de badge in te stellen of te wissen (op de voorgrondpagina of vanaf de service worker), voert u het volgende uit:

// 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 probeert de browser de beste weergave voor dat apparaat te bieden. Omdat de Badging API bijvoorbeeld niet wordt ondersteund op Android, toont Android alleen een punt in plaats van een numerieke waarde.

Ga er niet vanuit dat de user agent de badge op een bepaalde manier weergeeft. Sommige user agents nemen een getal zoals "4000" en herschrijven dit naar "99+". Als u de badge zelf overbelast (bijvoorbeeld door deze in te stellen op "99"), verschijnt de "+" niet. Ongeacht het werkelijke getal, roept u gewoon setAppBadge(unreadCount) aan en laat u de user agent de badge op de juiste manier weergeven.

Hoewel de App Badging API in Chrome een geïnstalleerde app vereist, moet u de Badging API niet afhankelijk maken van de installatiestatus. Roep de API gewoon aan wanneer deze bestaat, aangezien andere browsers de badge mogelijk op andere plaatsen weergeven. Als het werkt, werkt het. Zo niet, dan werkt het gewoon niet.

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

Je kunt de app-badge ook op de achtergrond instellen met behulp van de service worker. Dit kan via periodieke achtergrondsynchronisatie, de Push API of een combinatie van beide.

Periodieke achtergrondsynchronisatie

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

De frequentie waarmee de synchronisatie wordt uitgevoerd, is echter niet volledig betrouwbaar en wordt bepaald door de browser.

Web Push API

Met de Push API kunnen servers berichten sturen naar service workers, die JavaScript-code kunnen uitvoeren, zelfs wanneer er geen pagina op de voorgrond actief is. Zo kan een serverpush de badge bijwerken door navigator.setAppBadge() aan te roepen.

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

Daarnaast moeten gebruikers toestemming geven voor meldingen op uw site om pushberichten te kunnen ontvangen.

Een combinatie van beide

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

Feedback

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

Vertel ons over het API-ontwerp

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

Meld een probleem met de implementatie

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

  • Meld een bug op https://new.crbug.com . Zorg ervoor dat je zoveel mogelijk details en eenvoudige instructies voor reproductie geeft en stel Componenten in op UI>Browser>WebAppInstalls . Glitch is ideaal voor het delen van snelle en eenvoudige 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 om functies te prioriteren en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Nuttige links

Heldenfoto door Prateek Katyal op Unsplash