Uygulama Rozeti API'si, yüklü web uygulamalarının uygulama simgesi üzerinde uygulama genelinde bir rozet belirlemesine olanak tanır.
App Badging API nedir?
App Badging API, yüklü web uygulamalarının uygulama genelinde bir rozet ayarlamasına olanak tanır. Bu rozet, uygulamayla ilişkili işletim sistemine özel bir yerde (raf veya ana ekran gibi) gösterilir.
Rozetler, kullanıcıyı dikkatini gerektirebilecek yeni bir etkinlik olduğu konusunda nazikçe bilgilendirmeyi veya okunmamış mesaj sayısı gibi az miktarda bilgiyi belirtmeyi kolaylaştırır.
Rozetler, bildirimlerden daha kullanıcı dostu olma eğilimindedir ve kullanıcının iş akışını kesintiye uğratmadığı için çok daha sık güncellenebilir. Ayrıca, kullanıcıyı kesintiye uğratmadığı için kullanıcının izni gerekmez.
Olası kullanım alanları
Bu API'yi kullanabilecek uygulamalara örnek olarak şunlar verilebilir:
- Yeni mesajların geldiğini bildirmek veya okunmamış öğelerin sayısını göstermek için sohbet, e-posta ve sosyal medya uygulamaları.
- Uzun süredir çalışan arka plan görevlerinin (ör. resim veya video oluşturma) tamamlandığını bildirmek için üretkenlik uygulamaları.
- Oyunlar, bir oyuncunun bir işlem yapması gerektiğini belirtir (ör. Satranç'ta, oyuncunun sırası geldiğinde).
Destek
Uygulama Rozeti API'si, Windows ve macOS'te Chrome 81 ve Edge 81 veya sonraki sürümlerde çalışır. ChromeOS desteği geliştirme aşamasındadır ve gelecekteki bir sürümde kullanıma sunulacaktır. Android'de Badging API desteklenmez. Bunun yerine Android, Android uygulamalarında olduğu gibi, okunmamış bildirim olduğunda yüklü web uygulamasının uygulama simgesinde otomatik olarak rozet gösterir.
Dene
- App Badging API demosunu açın.
- İstendiğinde uygulamayı yüklemek için Yükle'yi tıklayın veya Chrome menüsünü kullanarak yükleyin.
- Yüklü bir PWA olarak açın. Yüklü bir PWA (görev çubuğunuzda veya Dock'ta) olarak çalışıyor olması gerektiğini unutmayın.
- Uygulama simgesinde rozeti ayarlamak veya silmek için Ayarla ya da Sil düğmesini tıklayın. Rozet değeri için bir sayı da sağlayabilirsiniz.
Uygulama Rozeti API'sini kullanma
App Badging API'yi kullanmak için web uygulamanızın Chrome'un yüklenebilirlik ölçütlerini karşılaması ve kullanıcıların bunu ana ekranlarına eklemesi gerekir.
Badge API, navigator
üzerinde iki yöntemden oluşur:
setAppBadge(
number
)
: Uygulamanın rozetini ayarlar. Bir değer sağlanırsa rozeti sağlanan değere ayarlayın. Aksi takdirde, düz beyaz bir nokta (veya platforma uygun başka bir işaret) gösterin.number
değerini0
olarak ayarlamak,clearAppBadge()
işlevini çağırmakla aynıdır.clearAppBadge()
: Uygulamanın rozetini kaldırır.
Her ikisi de hata işleme için kullanabileceğiniz boş promise'ler döndürür.
Rozet, mevcut sayfadan veya kayıtlı hizmet çalışanından ayarlanabilir. Rozeti ayarlamak veya temizlemek için (ön plan sayfasında veya hizmet çalışanında) şu işlevi çağırın:
// 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.
});
Bazı durumlarda, işletim sistemi rozetin tam olarak gösterilmesine izin vermeyebilir. Bu gibi durumlarda tarayıcı, söz konusu cihaz için en iyi temsili sunmaya çalışır. Örneğin, Badging API Android'de desteklenmediğinden Android her zaman sayısal değer yerine yalnızca bir nokta gösterir.
Kullanıcı aracısının rozeti nasıl gösterdiği hakkında hiçbir şey varsaymayın.
Bazı kullanıcı aracıları, "4000" gibi bir sayıyı "99+" olarak yeniden yazabilir. Rozeti kendiniz doyurursanız (örneğin, "99" olarak ayarlayarak) "+" işareti görünmez. Gerçek sayı ne olursa olsun, setAppBadge(unreadCount)
işlevini çağırmanız ve kullanıcı aracısının bunu uygun şekilde göstermesini sağlamanız yeterlidir.
Chrome'daki Uygulama Rozeti API'si yüklü bir uygulama gerektirse de Rozet API'sine yükleme durumuna bağlı olarak çağrı göndermemelisiniz. Diğer tarayıcılar rozeti başka yerlerde gösterebileceğinden, API mevcut olduğunda API'yi çağırmanız yeterlidir. Çalışıyorsa işe yarar. Aksi takdirde, bu işlem gerçekleşmez.
Hizmet çalışanından arka planda rozeti ayarlama ve temizleme
Hizmet çalışanını kullanarak uygulama rozetini arka planda da ayarlayabilirsiniz. Bunu, periyodik arka plan senkronizasyonu, Push API veya her ikisinin bir kombinasyonu aracılığıyla yapabilirsiniz.
Periyodik arka plan senkronizasyonu
Periyodik arka plan senkronizasyonu, hizmet çalışanının sunucuyu düzenli olarak yoklamasına olanak tanır. Bu, güncel bir durum bilgisi almak ve navigator.setAppBadge()
'yi çağırmak için kullanılabilir.
Ancak senkronizasyonun çağrılma sıklığı tam olarak güvenilir değildir ve tarayıcının takdirine bağlı olarak çağrılır.
Web Push API'sı
Push API, sunucuların hizmet işçilerine mesaj göndermesine olanak tanır. Hizmet işçileri, ön planda bir sayfa çalışmadığında bile JavaScript kodu çalıştırabilir. Bu nedenle, bir sunucu itmesi navigator.setAppBadge()
çağrısı yaparak rozeti güncelleyebilir.
Ancak, Chrome dahil olmak üzere çoğu tarayıcı, bir push mesajı alındığında bir bildirim gösterilmesini gerektirir. Bu, bazı kullanım durumlarında (örneğin, rozeti güncellerken bir bildirim gösterme) uygundur ancak rozetin bir bildirim görüntülemeden, çok dikkatli bir şekilde güncellenmesini imkansız hale getirir.
Ayrıca, kullanıcıların push mesajları alabilmesi için sitenize bildirim izni vermesi gerekir.
Her ikisinin bir kombinasyonu
Push API'sinin ve düzenli arka plan senkronizasyonunun birlikte kullanılması mükemmel olmasa da iyi bir çözüm sağlar. Yüksek öncelikli bilgiler Push API aracılığıyla gönderilir. Bu bilgiler, bildirim gösterir ve rozeti günceller. Daha düşük öncelikli bilgiler ise sayfa açıkken rozet güncellenerek veya düzenli arka plan senkronizasyonu aracılığıyla sağlanır.
Geri bildirim
Chrome ekibi, App Badging API ile ilgili deneyimlerinizi öğrenmek istiyor.
API tasarımı hakkında bilgi verin
API'de beklediğiniz gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz var mı?
- Badging API GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.
Uygulamayla ilgili sorunları bildirme
Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı?
- https://new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ekleyin, sorunun yeniden oluşturulmasına yönelik basit talimatlar verin ve Bileşenler'i
UI>Browser>WebAppInstalls
olarak ayarlayın. Glitch, hızlı ve kolay şekilde yeniden oluşturulmuş içerikleri paylaşmak için idealdir.
API'ye desteğinizi gösterin
Sitenizde Uygulama Rozeti API'sini kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chrome ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine bunları desteklemenin ne kadar kritik olduğunu gösterir.
#BadgingAPI
hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve bu özelliği nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
- Herkese açık açıklama
- Özellik taslağı
- Badging API Demo | Badging API Demo kaynağı
- İzleme hatası
- ChromeStatus.com girişi
- Blink Bileşeni:
UI>Browser>WebAppInstalls
Unsplash'taki Prateek Katyal tarafından çekilen hero fotoğrafı