Her uygulama bir rozeti hak eder
Cihazınızdaki yerel uygulamalar için her gün gördüğünüz çok yaygın bir kullanıcı arayüzü kalıbıdır: bir bildirim rozeti. Kullanıcıları basit ve küçük bir gösterge aracılığıyla bazı gözden kaçan bilgiler hakkında bilgilendiren harika bir konsept. En yaygın olarak bu bir sayaçtır ve bazı özel uygulamalar için, örneğin turuncu bir madeni paranın anahtarlığın kilidinin açık ve erişilebilir olduğunu gösterdiği macOS'un Anahtarlık uygulamasında simgeye özel bir rozet veya görsel ayarlama kullanılır.
Ancak varsayılan rozete geri dönelim. Google'ın web'i sürekli olarak ileriye taşıması sayesinde, yüklü aşamalı web uygulamanız rozet olarak bir sayaç da görüntüleyebilir.
Önkoşullar
Web uygulamanızın bir rozet gösterebilmesi için, aşağıda ekte bağlantısı verilen Google'ın "yüklenebilirlik ölçütlerini" karşılaması gerekir. Ve bu kesinlikle mantıklı: Sisteminizde sabit bir yere sahip olmak için PWA'nızın bir cihaza kurulması gerekir. Windows'ta uygulamalarınız görev çubuğunda ve macOS'ta Dock'ta bulunur.
Henüz bilmiyorsanız, web uygulamanız "Aşamalı Web Uygulamaları" veya kısaca PWA adı verilen yeni bir uygulama sınıfına evrilecek şekilde aşamalı olarak geliştirilebilir. PWA'lar, daha önce yalnızca yerel uygulamalar için kullanılabilen çok çeşitli yeni özellikleri destekler. Kurulabilen bir PWA olan bu web uygulamasında PWA'lar hakkında birçok makaleye göz atabilirsiniz.
Uygulama Rozeti API'si desteğinin şu anda Chromium Tarayıcılarla sınırlı olduğunu ve Android'in yanı sıra yalnızca Masaüstü cihazlarda desteklendiğini unutmayın. API'nin genel durumu Chromium için kararlıdır, ancak diğer tarayıcılar tarafından hiçbir şekilde desteklenmez. Bu nedenle kullanım, uygulamayı kullanmak için zorunlu bir gereklilik olmamalı, aksine mevcut UX'i aşamalı olarak geliştirmelidir.
Nasıl çalışır
Gerçek uygulama çok basittir ve tüm kullanım durumlarını kapsayacak şekilde yalnızca birkaç satır kod gerektirir.
// 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();
}
Bu yeni API'nin çok güzel bir yönü, Service Worker'ınızın içinde de kullanılabilmesidir; bu, uygulandığı takdirde, kurulu PWA'nızın arka planda veri getirebileceği ve anında iletme bildirimleri alabileceği ve bunun sonucunda uygulamanızın rozetini güncelleyebileceği anlamına gelir. !
Sonuç
Gördüğünüz gibi, Uygulama Rozeti API'sini kullanmak gerçekten çok basit. Test etmeniz için gereken tek şey, Chromium tabanlı bir tarayıcının yanı sıra yüklenebilecek basit bir PWA'dır. Bu API'nin yakın zamanda Safari veya Firefox'ta kullanıma sunulması beklenemez, çünkü bu aynı zamanda bu ekipler tarafından genel olarak PWA'lara daha fazla bağlılık anlamına gelir. Ancak, mümkün olduğunda web uygulamanız için geliştirilmiş bir UX için harika bir kazançtır ve kesinlikle kullanılmalıdır!
