Uygulama simgeleri için rozetler

App Badging API, yüklü web uygulamalarının uygulama simgesinde uygulama genelinde bir rozet ayarlamasına olanak tanır.

Pete LePage

App Badging API nedir?

Sekiz bildirim içeren Twitter ve bayrak türü rozet gösteren başka bir uygulama örneği.
Sekiz bildirim içeren Twitter ve bayrak türü rozet gösteren başka bir uygulama örneği.

Uygulama rozeti API'si, yüklü web uygulamalarının uygulama genelinde bir rozet ayarlamasına olanak tanır. Bu rozet, uygulamayla ilişkili işletim sistemine özgü bir yerde (ör. raf veya ana ekran) gösterilir.

Rozetler, kullanıcılara dikkat etmeleri gereken yeni bir etkinlik olduğunu veya okunmamış mesaj sayısı gibi az miktarda bilgiyi kolayca bildirmeyi sağlar.

Rozetler, bildirimlere kıyasla daha kullanıcı dostudur ve kullanıcıyı kesintiye uğratmadığı için çok daha yüksek bir sıklıkta güncellenebilir. Ayrıca, kullanıcıyı kesintiye uğratmadıkları 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 belirtmek veya okunmamış öğelerin sayısını göstermek için sohbet, e-posta ve sosyal medya uygulamaları.
  • Üretkenlik uygulamaları, uzun süren bir arka plan görevinin (ör. resim veya video oluşturma) tamamlandığını belirtmek için.
  • Oyunlarda, oyuncu işlem yapması gerektiğinde (ör. satrançta oyuncunun sırası geldiğinde)

Destek

Uygulama Rozeti API'si, Chrome 81 ve Edge 81 veya sonraki sürümlerde Windows ve macOS'te ç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 uygulamalarında olduğu gibi, okunmamış bir bildirim olduğunda Android, yüklenen web uygulamasının uygulama simgesinde otomatik olarak bir rozet gösterir.

Dene

  1. App Badging API demosunu açın.
  2. İstendiğinde uygulamayı yüklemek için Yükle'yi tıklayın veya yüklemek için Chrome menüsünü kullanın.
  3. Yüklü bir PWA olarak açın. Uygulamanın, yüklü bir PWA olarak (görev çubuğunuzda veya dock'unuzda) çalışması gerektiğini unutmayın.
  4. Uygulama simgesinde rozeti ayarlamak veya temizlemek için Ayarla ya da Temizle düğmesini tıklayın. Badge value (Rozet değeri) için bir sayı da belirtebilirsiniz.

Uygulama rozeti API'si nasıl kullanılır?

Uygulama rozeti API'sini kullanmak için web uygulamanızın Chrome'un yüklenebilirlik ölçütlerini karşılaması ve kullanıcıların uygulamayı 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ğerini 0 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ş sözler 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 ya da hizmet çalışanı içinde) ş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 sağlamaya çalışır. Örneğin, Badging API Android'de desteklenmediğinden Android yalnızca sayısal değer yerine nokta gösterir.

Kullanıcı aracısının rozeti nasıl göstereceğiyle ilgili herhangi bir varsayımda bulunmayı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, yalnızca setAppBadge(unreadCount) çağrısı yapın ve kullanıcı aracısının bunu uygun şekilde göstermesine izin verin.

Chrome'daki uygulama rozeti API'si, yüklü bir uygulama gerektirse de rozet API'sine yapılan çağrıları yükleme durumuna bağlı hale getirmemelisiniz. Diğer tarayıcılar rozeti başka yerlerde gösterebileceğinden, yalnızca API mevcut olduğunda API'yi çağırın. İşe yararsa işe yarar. Aksi takdirde, bu özellik kullanılamaz.

Servis çalışanı aracılığıyla arka planda rozeti ayarlama ve temizleme

Ayrıca, hizmet çalışanı kullanarak uygulama rozetini arka planda ayarlayabilirsiniz. Bu işlemi periyodik arka plan senkronizasyonu, Push API veya her ikisinin kombinasyonu aracılığıyla yapın.

Periyodik arka plan senkronizasyonu

Periyodik arka plan senkronizasyonu, hizmet çalışanının sunucuyu düzenli olarak yoklamasına olanak tanır. Bu, güncellenmiş bir durumu almak ve navigator.setAppBadge() işlevini çağırmak için kullanılabilir.

Ancak senkronizasyonun çağrılma sıklığı tamamen güvenilir değildir ve tarayıcının takdirine bağlı olarak çağrılır.

Web Push API

Push API, sunucuların hizmet çalışanlarına mesaj göndermesine olanak tanır. Hizmet çalışanları, ön planda çalışan bir sayfa olmasa bile JavaScript kodu çalıştırabilir. Bu nedenle, sunucu gönderme işlemi navigator.setAppBadge() çağrılarak rozeti güncelleyebilir.

Ancak Chrome da dahil olmak üzere çoğu tarayıcı, push mesajı alındığında bildirim gösterilmesini zorunlu kılar. Bu, bazı kullanım alanları (ör. rozet güncellenirken bildirim gösterme) için uygundur ancak bildirim göstermeden rozeti ince bir şekilde güncellemek mümkün değildir.

Ayrıca, kullanıcıların push mesajı alabilmek için sitenize bildirim izni vermesi gerekir.

İkisinin birleşimi

Mükemmel olmasa da Push API ve düzenli arka plan senkronizasyonunu birlikte kullanmak iyi bir çözüm sunar. Yüksek öncelikli bilgiler, Push API aracılığıyla iletilir. Bu bilgiler, bildirim göstererek ve rozeti güncelleyerek sunulur. Daha düşük öncelikli bilgiler ise sayfa açıkken veya düzenli arka plan senkronizasyonu aracılığıyla rozet güncellenerek iletilir.

Geri bildirim

Chrome Ekibi, uygulama rozeti API'si ile ilgili deneyimlerinizi öğrenmek istiyor.

API tasarımı hakkında bilgi verin.

API'de beklediğiniz gibi çalışmayan bir şey var mı? Ya da fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeli hakkında sorunuz veya yorumunuz mu var?

Uygulamayla ilgili sorun bildirme

Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve sorunu yeniden oluşturmayla ilgili basit talimatlar eklediğinizden emin olun. Ayrıca Bileşenler'i UI>Browser>WebAppInstalls olarak ayarlayın.

API'ye desteğinizi gösterme

Sitenizde App Badging API'yi kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına bu özelliklerin desteklenmesinin ne kadar önemli olduğunu gösterir.

  • #BadgingAPI hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve özelliği nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Unsplash'teki Prateek Katyal'ın hero fotoğrafı