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.

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 bildirimi olan 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 belirlemesine olanak tanır. Bu rozet, uygulamayla ilişkili işletim sistemine özgü bir yerde (ör. raf veya ana ekran) 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, oyuncunun hareket etmesi gerektiğini belirtmek için (ör. satrançta oyuncunun sırası olduğunda).

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. Uygulamanın, yüklü bir PWA olarak (görev çubuğunuzda veya dock'unuzda) çalıştığını 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

Uygulama Rozeti API'yi kullanmak için web uygulamanızın Chrome'un yüklenilebilirlik ö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ş 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. İşe yarayan yöntemler 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

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 da dahil olmak üzere çoğu tarayıcı, bir push mesajı alındığında bildirim gösterilmesini gerektirir. Bu, bazı kullanım alanları için uygundur (ör. rozet güncellenirken bildirim göstermek). Ancak bildirim göstermeden rozeti gizlice güncellemeyi 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 ve periyodik arka plan senkronizasyonunu birlikte kullanmak mükemmel bir çözüm olmasa da iyi bir çözümdür. 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, yeniden oluşturma ile ilgili 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'yi destekleme

Sitenizde Uygulama Rozeti API'sini kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli 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 oluşturulan hero fotoğrafı