Uygulama simgeleri için rozetler

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

Pete LePage

Uygulama Rozetleri API'si nedir?

Sekiz bildirimi bulunan Twitter ve bayrak türü rozeti gösteren başka bir uygulama örneği.
Sekiz bildirimi olan Twitter ve bayrak türü rozeti gösteren başka bir uygulama örneği.

App Badging API, yüklü web uygulamalarının uygulama genelinde bir rozet ayarlamasına olanak tanır. Bu rozet, uygulamayla ilişkilendirilmiş işletim sistemine özel bir yerde (ör. raf veya ana ekran) gösterilir.

Rozetler, kullanıcının ilgilenmesini gerektirebilecek yeni bir etkinlik olduğunu kullanıcıyı fark etmeden veya az miktarda bilgi (ör. okunmamış sayı) belirtmeyi kolaylaştırır.

Rozetler bildirimlerden daha kullanıcı dostu olma eğilimindedir ve kullanıcıyı rahatsız etmedikleri için çok daha yüksek sıklıkta güncellenebilir. Kullanıcıyı kesintiye uğratmadıkları için kullanıcının iznine de ihtiyaç duymazlar.

Olası kullanım alanları

Bu API'yi kullanabilecek uygulamalara örnekler:

  • Yeni mesajların geldiğini bildirmek veya okunmamış öğelerin sayısını göstermek için sohbet, e-posta ve sosyal uygulamalar.
  • Uzun süredir devam eden bir arka plan görevinin (ör. resim veya video oluşturma) tamamlandığını gösteren üretkenlik uygulamaları.
  • Oyuncunun işlem yapması gerektiğini gösteren oyunlar (ör. Satranç'ta sıra oyuncuya geldiğinde)

Destek

Uygulama Rozetleri API'si, Windows ve macOS'te, Chrome 81 ve Edge 81 veya sonraki sürümlerde çalışır. ChromeOS için destek şu anda geliştirme aşamasındadır ve gelecekteki bir sürümde sunulacaktır. Android'de Rozet API'si desteklenmez. Bunun yerine, Android uygulamalarında olduğu gibi, okunmamış bir bildirim olduğunda Android, yüklü web uygulamasının uygulama simgesinde otomatik olarak bir rozet gösterir.

Deneyin

  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. Yüklü bir PWA olarak (görev çubuğunuzda veya yuvanızda) çalışıyor olması gerektiğini unutmayın.
  4. Rozeti uygulama simgesinden ayarlamak veya temizlemek için Ayarla veya Temizle düğmesini tıklayın. Rozet değeri için de bir sayı girebilirsiniz.

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

App Badging API'yi 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.

Rozeti API'si, navigator ürününde 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örüntüleyin. number öğesini 0 değerine ayarlamak clearAppBadge() işlevini çağırmakla aynı şeydir.
  • clearAppBadge(): Uygulamanın rozetini kaldırır.

Her ikisi de hata işleme için kullanabileceğiniz boş vaatler döndürür.

Rozet, geçerli sayfadan veya kayıtlı hizmet çalışanı tarafından ayarlanabilir. Rozeti ayarlamak veya temizlemek için (ön plan sayfasında veya hizmet çalışanında) şu çağrıyı yapı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 tür durumlarda, tarayıcı o cihaz için en iyi temsili sağlamaya çalışır. Örneğin, Rozet API'si Android'de desteklenmediği için Android sayısal değer yerine sadece nokta gösterir.

Kullanıcı aracısının rozeti nasıl gösterdiğiyle ilgili hiçbir varsayımda bulunmayın. Bazı kullanıcı aracıları "4000" gibi bir sayı alıp "99+" olarak yeniden yazabilir. Rozeti kendiniz doyurursanız (örneğin, "99" olarak ayarlarsanız) "+" işareti görünmez. Asıl numara ne olursa olsun, setAppBadge(unreadCount) numaralı telefonu arayın ve kullanıcı aracısının numarayı uygun şekilde görüntülemesini bekleyin.

Chrome'daki Uygulama Rozetleri API'si için yüklü bir uygulama gerekir ancak Badging API'ye yapılan çağrıları yükleme durumuna bağlı olarak yapmamalısınız. Diğer tarayıcılar rozeti başka yerlerde de gösterebileceğinden, API mevcut olduğunda onu çağırmanız yeterlidir. İşe yararsa da işe yarar. Öyle değilse de öyle değil.

Arka planda hizmet çalışanı rozeti ayarlama ve temizleme

Uygulama rozetini, Service Worker'ı kullanarak arka planda da ayarlayabilirsiniz. Bunu periyodik arka plan senkronizasyonu, Push API veya ikisinin bir kombinasyonu aracılığıyla yapabilirsiniz.

Periyodik arka plan senkronizasyonu

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

Bununla birlikte, senkronizasyonun çağrılma sıklığı tam olarak güvenilir değildir ve buna tarayıcının karar verme yetkisi denir.

Web Push API'sı

Push API, sunucuların hizmet çalışanlarına mesaj göndermesine olanak tanır. Hizmet çalışanları, ön plan sayfası çalışmıyorken bile JavaScript kodu çalıştırabilir. Bu nedenle, bir sunucu push bildirimi navigator.setAppBadge() yöntemini çağırarak rozeti güncelleyebilir.

Ancak Chrome dahil çoğu tarayıcıda push mesajı alındığında bildirim gösterilmesi gerekir. Bu, bazı kullanım alanları (örneğin, rozeti güncellerken bir bildirim gösterme) için uygundur ancak bildirim göstermeden rozetin ustaca güncellenmesini imkansız hale getirir.

Ayrıca, kullanıcıların push mesajlarını alabilmeleri için site bildirim izni vermeniz gerekir.

Her ikisinin kombinasyonu

Mükemmel olmasa da, Push API'sini ve periyodik arka plan senkronizasyonunu birlikte kullanmak iyi bir çözümdür. Yüksek öncelikli bilgiler Push API'sı aracılığıyla iletilerek bir bildirim gösterilir ve rozet güncellenir. Ayrıca, düşük öncelikli bilgiler sayfa açıkken veya düzenli arka plan senkronizasyonu aracılığıyla rozeti güncelleyerek gönderilir.

Geri bildirim

Chrome ekibi, Uygulama Rozetleri API'si ile ilgili deneyimlerinizi öğrenmek istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şeyler var mı? Yoksa fikrinizi uygulamak için gereken eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz var mı?

Uygulamayla ilgili bir sorunu bildirin

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

  • https://new.crbug.com adresinden hata bildiriminde bulunun. Mümkün olduğunca çok ayrıntı eklediğinizden, yeniden oluşturmaya ilişkin basit talimatları eklediğinizden ve Bileşenler'i UI>Browser>WebAppInstalls olarak ayarladığınızdan emin olun. Glitch, hızlı ve kolay yeniden prodüksiyonlar paylaşmak için idealdir.

API'ye desteği gösterin

Sitenizde Uygulama Rozetleri API'sini kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, Chrome ekibinin özellikleri öncelik sırasına koymasına yardımcı olur ve diğer tarayıcı satıcılarına, bu özellikleri desteklemenin ne kadar kritik olduğunu gösterir.

  • #BadgingAPI hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Unsplash'ta Prateek Katyal tarafından hazırlanan hero fotoğraf