Uygulama simgeleri için rozetler

Uygulama Rozeti API'si, yüklü web uygulamalarının uygulama simgesi üzerinde uygulama genelinde bir rozet belirlemesine olanak tanır.

Sekiz bildirim içeren Twitter ve bayrak türü rozet gösteren başka bir uygulama örneği.
Sekiz bildirimi olan Twitter ve bayrak türü rozet 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ş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

  1. App Badging API demosunu açın.
  2. İstendiğinde uygulamayı yüklemek için Yükle'yi tıklayın veya Chrome menüsünü kullanarak yükleyin.
  3. 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.
  4. 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ğ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ş 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ı?

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

Unsplash'taki Prateek Katyal tarafından çekilen hero fotoğrafı