Minden alkalmazás megérdemel egy jelvényt
Ez egy nagyon gyakori felhasználói felület mintázat, amelyet mindennap láthat a készüléken lévő natív alkalmazások számára: értesítési jelvény. Nagyszerű koncepció, amely egyszerű és kicsi mutató segítségével tájékoztatja a felhasználókat néhány hiányzó információról. Leggyakrabban ez egy számláló, és egyes speciális alkalmazások esetében egyedi jelvényt vagy az ikon vizuális kiigazítását használják, például a macOS Keychain-alkalmazásában, ahol egy narancssárga érme jelzi, hogy a kulcstartó nyitva van és hozzáférhető.
De visszatérve az alapértelmezett kitűzésre. Köszönhetően annak, hogy a Google folyamatosan nyomja előre az internetet, a telepített progresszív webalkalmazás számlálót is láthat.
Előfeltételek
Annak érdekében, hogy webalkalmazása jelvényt mutathasson, meg kell felelnie a Google „kiegészíthetőségi kritériumainak”, amelyeket az alábbi függelék tartalmaz. És ennek teljesen értelme van: a PWA-t telepíteni kell egy eszközre annak érdekében, hogy fix helye legyen a rendszerben. Windows rendszeren az alkalmazásai a tálcán, a macOS pedig a Dockon találhatók.
Ha még nem tudja, akkor webalkalmazása fokozatosan továbbfejleszthető, és új alkalmazáskategóriává fejlődik, a „Progresszív Webalkalmazások”, röviden PWA néven. A PWA-k sokféle új funkciót támogatnak, amelyek korábban csak a natív alkalmazások számára voltak elérhetőek. Számos cikket megnézhet a PWA-kkal kapcsolatban ezen a webalkalmazáson, amely maga a PWA is telepíthető.
Vegye figyelembe, hogy az App Badging API támogatása jelenleg csak a Chromium böngészőkre korlátozódik, és csak asztali eszközökön, valamint Androidon támogatott. Az API általános állapota stabil a Chromium számára, de más böngészők semmilyen módon nem támogatják. Ezért a használatnak nem kötelező követelménynek kell lennie az alkalmazás használatához, hanem fokozatosan fokoznia kell a meglévő UX-t.
Hogyan működik
A tényleges megvalósítás nagyon egyszerű, és csak néhány kódsorra van szükség az összes felhasználási eset lefedésére.
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
Ennek az új API-nak nagyon szép aspektusa, hogy a Service Worker-en belül is használható, ami azt jelenti, hogy ha megvalósul, akkor a telepített PWA lekérheti az adatokat a háttérben és leküldéses értesítéseket kaphat, amelyek viszont frissíthetik az alkalmazásod jelvényét !
Következtetés
Mint látta, az App Badging API használata nagyon egyszerű. A teszteléshez csak egy Chromium-alapú böngésző, valamint egy egyszerű telepíthető PWA szükséges. Nem várható, hogy ez az API hamarosan elérhető lesz a Safari vagy a Firefox böngészőben, mivel ez azt is jelenti, hogy ezek a csapatok általában nagyobb elkötelezettséget jelentenek a PWA iránt. De ha lehetséges, a webalkalmazásod továbbfejlesztett UX-jéhez, ez nagyszerű győzelem, és mindenképpen fel kell használni!
