Ĉiu programo meritas insignon
Ĝi estas tre ofta UI-ŝablono, kiun vi vidas ĉiutage por la denaskaj programoj en via aparato: sciiga insigno. Ĝi estas bonega koncepto, kiu informas uzantojn pri iuj maltrafitaj informoj per simpla kaj malgranda indikilo. Plej ofte ĝi estas vendotablo kaj por iuj specialaj programoj oni uzas laŭmendan insignon aŭ vidan alĝustigon al la ikono, ekzemple ĉe la programo Keychain de macOS, kie oranĝa monero indikas, ke la ŝlosilĉeno estas malŝlosita kaj alirebla.
Sed reiru al la apriora insigno. Danke al Google senĉese antaŭenpuŝanta la retejon, via instalita progresema reteja programo ankaŭ povas montri nombrilon kiel insignon.
Antaŭkondiĉoj
Por ke via TTT-programo povu montri insignon, ĝi devas plenumi la "instalajn kriteriojn" de Google, ligitajn sube en la aldonaĵo. Kaj ĉi tio tute sencas: via PWA devas esti instalita sur aparato por havi fiksan lokon en via sistemo. En Vindozo, viaj programoj vivas en la taskobreto kaj en macOS ĝi estas en la Doko.
Se vi ankoraŭ ne scias, via retprogramo povas esti iom post iom plibonigita por evolui al nova klaso de aplikoj nomataj "Progresemaj Retaj Programoj", aŭ mallonge PWA. PWA-oj subtenas ampleksan varion de novaj funkcioj, kiuj antaŭe nur haveblis al denaskaj programoj. Vi povas kontroli multajn artikolojn pri PWA-oj en ĉi tiu retejo-programo, kiu estas PWA mem instalinda.
Rimarku, ke subteno por la API-Badging-API estas nuntempe limigita al Chromium Browsers kaj nur subtenata ĉe labortablaj aparatoj kaj ankaŭ Android. La ĝenerala stato de la API estas stabila por Chromium, sed neniel subtenata de aliaj retumiloj. Tial uzado ne estu deviga postulo uzi la programon, sed iom post iom plibonigi la ekzistantan UX.
Kiel ĝi funkcias
La efektiva efektivigo estas tre simpla kaj nur postulas kelkajn liniojn de kodo por kovri ĉiujn uzokazojn.
// 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();
}
Tre bela aspekto de ĉi tiu nova API estas, ke ĝi povas esti uzata ankaŭ en via Serva Laboristo, kio signifas, ke, se efektivigita, via instalita PWA povas alporti datumojn en la fono kaj ricevi push-sciigojn, kiuj siavice povas ĝisdatigi la insignon de via programo. !
Konkludo
Kiel vi vidis, uzi la App Badging API estas vere simpla. Ĉio bezonata por vi testi estas retumilo bazita sur kromio kaj ankaŭ simpla PWA, kiu povas esti instalita. Oni ne atendas, ke ĉi tiu API estos disponebla en Safaro aŭ Fajrovulpo baldaŭ, ĉar tio ankaŭ implicas pli da engaĝiĝo al PWA-oj ĝenerale de tiuj teamoj. Sed por plibonigita UX por via retejo, kiam eblas, ĝi estas bonega venko kaj certe devas esti uzata!
