Elke app verdien 'n kenteken
Dit is 'n baie algemene gebruikersinterface-patroon wat u elke dag sien vir die oorspronklike programme op u toestel: 'n kennisgewingkenteken. Dit is 'n uitstekende konsep wat gebruikers inlig oor gemiste inligting via 'n eenvoudige en klein aanwyser. Dit is meestal 'n toonbank en vir sommige spesiale programme word 'n pasgemaakte kenteken of visuele aanpassing van die ikoon gebruik, byvoorbeeld op MacOS se sleutelhanger-app, waar 'n oranje muntstuk aandui dat die sleutelhanger oopgesluit en toeganklik is.
Maar terug na die standaardkenteken. Danksy Google wat die internet geleidelik voortstoot, kan u geïnstalleerde progressiewe webprogram ook 'n toonbank toon.
Voorvereistes
Om u webprogram 'n kenteken te kan wys, moet dit voldoen aan Google se "installeerbaarheidskriteria", wat hieronder in die addendum gekoppel is. En dit is absoluut sinvol: u PWA moet op 'n toestel geïnstalleer word om 'n vaste plek in u stelsel te hê. Op Windows leef u programme in die taakbalk en op macOS is dit in die Dock.
As u nog nie weet nie, kan u web-app geleidelik verbeter word om te ontwikkel tot 'n nuwe klas toepassings genaamd "Progressive Web Apps", of kortweg PWA. PWA's ondersteun 'n wye verskeidenheid nuwe funksies wat voorheen slegs beskikbaar was vir native apps. U kan baie artikels oor PWA's op hierdie webprogram lees, wat 'n PWA self is wat geïnstalleer kan word.
Let daarop dat ondersteuning vir die App Badging API tans beperk is tot Chromium Browsers en slegs op lessenaartoestelle sowel as Android ondersteun word. Die algehele toestand van die API is stabiel vir Chromium, maar word op geen enkele manier deur ander blaaiers ondersteun nie. Daarom is gebruik nie 'n verpligte vereiste om die app te gebruik nie, maar eerder die bestaande UX geleidelik te verbeter.
Hoe dit werk
Die werklike implementering is baie eenvoudig en benodig slegs 'n paar reëls kode om alle gebruiksgevalle te dek.
// 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();
}
'N Baie mooi aspek van hierdie nuwe API is dat dit ook in u dienswerker gebruik kan word, wat beteken dat, indien geïmplementeer, u geïnstalleerde PWA data in die agtergrond kan oplaai en stootkennisgewings kan ontvang, wat weer die app se kenteken kan opdateer. !
Afsluiting
Soos u gesien het, is die gebruik van die App Badging API baie eenvoudig. Al wat u moet toets, is 'n blaaier op Chromium sowel as 'n eenvoudige PWA wat geïnstalleer kan word. Dit is nie te verwagte dat hierdie API binnekort beskikbaar sal wees op Safari of Firefox nie, aangesien dit ook meer verbintenis tot PWA's in die algemeen deur daardie spanne impliseer. Maar vir 'n verbeterde UX vir u webapp, waar moontlik, is dit 'n wonderlike oorwinning en moet dit beslis gebruik word!
