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ı rahatsız etmedikleri için kullanıcının iznine ihtiyaçları da yoktur.

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 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

App Badging API, Windows ve macOS'te, Chrome 81 ile 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 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ıştığını unutmayın.
  4. Uygulama simgesinden rozeti ayarlamak veya temizlemek için Ayarla veya Temizle düğmesini tıklayın. Rozet değeri için de bir sayı 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 öğesinin 0 olarak ayarlanması, clearAppBadge() yönteminin çağrılmasıyla 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 konusunda herhangi bir varsayımda bulunmayın. Bazı kullanıcı aracıları "4000" gibi bir sayıyı alıp "99+" olarak yeniden yazabilir. Rozeti kendiniz doldurursanız (örneğin, "99" olarak ayarlarsanız) "+" 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 halde iletişim kurulmaz.

Service Worker'ın rozetini arka planda ayarlayıp 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

Düzenli arka plan senkronizasyonu, bir hizmet çalışanının düzenli olarak sunucuyu yoklamasına olanak tanır. Bu sorgu, güncel durumu almak için kullanılabilir ve navigator.setAppBadge() çağrısı yapmak 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 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'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.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için ihtiyacınız olan yöntemler veya özellikler mi eksik? 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 yeniden prodüksiyonları paylaşmak için idealdir.

API'ye desteğinizi gösterin

Sitenizde Uygulama Rozetleri API'sini kullanmayı mı planlıyorsunuz? 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ı