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

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

Rozetler, kullanıcıya yeni bir etkinlik olduğunu habersiz bir şekilde bildirmeyi kolaylaştırır dikkatlerini daha fazla çekebileceğini düşündüklerinde önemli bilgileri de dahil edebilirsiniz.

Rozetler bildirimlerden daha kullanıcı dostudur ve güncellenebilir. kullanıcı deneyimini kesintiye uğratmamaları nedeniyle daha yüksek sıklıkta gösterilir. Ve son olarak Çünkü kullanıcının çalışmasını kesintiye uğratmaz ve kullanıcının iznine ihtiyacı yoktur.

Olası kullanım alanları

Bu API'yi kullanabilecek uygulamalara örnek olarak şunlar verilebilir:

  • Sohbet, e-posta ve sosyal uygulamalar ile yeni mesajların geldiğini bildirme veya okunmamış öğelerin sayısını gösterir.
  • Uzun süreli bir arka plan görevinin (ör. oluşturma) tamamlandığında,
  • Oyunlar: Bir oyuncunun bir işlem yapması gerektiğini belirten (ör. Satranç'ta oyuncunun sırasıdır.

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 gelecekte kullanıma sunulacaktır kullanabilirsiniz. Android'de Badging API desteklenmez. Bunun yerine Android, yüklü web uygulamasının uygulama simgesinde otomatik olarak bir rozet gösterir okunmuş bir bildirim olduğunda otomatik olarak devreye girer.

Dene

  1. Şunu açın: App Badging API demosu.
  2. İstendiğinde, uygulamayı yüklemek için Yükle'yi tıklayın veya tıklayın.
  3. Yüklü bir PWA olarak açın. Yüklü bir PWA olarak çalışması gerektiğini unutmayın (görev çubuğunuzda veya Dock'ta).
  4. Rozeti uygulamadan ayarlamak veya temizlemek için Ayarla veya Temizle düğmesini tıklayın simgesini tıklayın. Rozet değeri için de bir sayı sağlayabilirsiniz.

Uygulama Rozetleri API'sini kullanma

App Badging API'yi kullanmak için web uygulamanızın şunu karşılaması gerekir: Chrome'un yüklenebilirlik ölçütleri, Ana ekranlarına eklemesi gerekir.

Rozet API'si, navigator ile ilgili iki yöntemden oluşur:

  • setAppBadge(number): Uygulamanın rozetini ayarlar. Bir değer sağlanırsa değerini eklemezseniz düz beyaz bir nokta (veya başka işaretleyin. number öğesinin 0 olarak ayarlanması aynı işlevi görür clearAppBadge() aranıyor.
  • 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ı şu bağlantıdan ayarlanabilir: hizmet çalışanıdır. Rozeti ayarlamak veya temizlemek için (ön plan sayfasında veya hizmet çalışanı) ç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 tür durumlarda tarayıcı kullanıcılar için en iyi temsili e-tablolarda tutabilirsiniz. Örneğin, Rozet API'si Android'de desteklenmediğinden Android'de sayısal değer yerine yalnızca nokta gösterilir.

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ı alabilir ve bunu, "99+". Rozeti kendiniz doyurursanız (örneğin "99"a ayarlayarak) ardından "+" görünmez. Gerçek numara ne olursa olsun, sizi arayın setAppBadge(unreadCount) ve kullanıcı aracısının uygun şekilde gösterir.

Chrome'daki App Badging API'si için yüklü bir uygulama gerekli olsa da Yükleme durumuna bağlı olarak Badging API'ye çağrı yapabilir. Sadece Diğer tarayıcılar rozeti başka yerlerde gösterebileceği için, varsa API. Çalışıyorsa işe yarar. Böyle bir durum söz konusu değilse bile çalışmaz.

Service Worker'ın rozetini arka planda ayarlayıp temizleme

Service Worker'ı kullanarak uygulama rozetini arka planda da ayarlayabilirsiniz. Bunu da yapın Push API'si veya her ikisinin kombinasyonu aracılığıyla düzenli aralıklarla arka plan senkronizasyonunu kullanabilirsiniz.

Periyodik arka plan senkronizasyonu

Düzenli arka plan senkronizasyonu, bir hizmet çalışanına düzenli aralıklarla anket yapmak için kullanılır. Bu anket, güncel durumu almak için ve navigator.setAppBadge() numaralı telefonu arayın.

Ancak senkronizasyonun çağrılma sıklığı mükemmel güvenilir değildir, ve tarayıcının şahsi karar verme yetkisiyle çağrılır.

Web Push API'sı

Push API, sunucuların hizmet çalışanlarına ileti göndermesine olanak tanır. ön plan sayfası çalışmıyorken bile JavaScript kodu çalıştırabilen bir API'dir. Böylece, sunucu push işlemi, navigator.setAppBadge() yöntemini çağırarak rozeti güncelleyebilir.

Ancak, Chrome dahil olmak üzere çoğu tarayıcıda her push mesajı alındığında görüntülenir. Bu bazı durumlarda durumlarda (örneğin, güncelleme yaparken bir bildirim gösterme) Ancak, rozete sahip olmayabileceği gibi, rozete sahip bir bildirim görüntüleniyor.

Ayrıca, push mesajları almalarını.

Her ikisinin bir kombinasyonu

Mükemmel olmasa da, Push API'sini ve düzenli arka plan senkronizasyonunu birlikte kullanarak iyi bir çözüm sunar. Yüksek öncelikli bilgiler Push aracılığıyla gönderilir API'de bildirim gösteriliyor ve rozet güncelleniyor. Daha düşük öncelik rozeti güncellemek suretiyle, bilgi, sayfa açıkken veya veya düzenli arka plan senkronizasyonu aracılığıyla.

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? Veya fikrinizi uygulamak için gereken yöntemler veya özellikler var mı? Güvenlik modeliyle ilgili sorunuz veya yorumunuz var mı?

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa ve spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarda mümkün olduğunca yeniden oluşturmaya ilişkin basit talimatları uygulayabilir ve Bileşenler'i UI>Browser>WebAppInstalls. Glitch mükemmel bir yöntemdir hızlı ve kolay üretimleri paylaşabilirsiniz.

API'ye desteğinizi gösterin

Sitenizde Uygulama Rozetleri API'sini kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesi için çalışır ve diğer tarayıcı tedarikçilerine asıl amaç onları desteklemek.

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

Faydalı bağlantılar

Hero fotoğrafı: Prateek Katyal açık Lansmanı kaldır