Plakietki ikon aplikacji

Interfejs App Badging API umożliwia zainstalowanym aplikacjom internetowym ustawianie plakietki w ikonie aplikacji.

Pete LePage

Czym jest interfejs App Badging API?

Przykład Twittera z 8 powiadomieniami i innej aplikacji z odznaką w formie flagi.
Przykład Twittera z 8 powiadomieniami i innej aplikacji z plakietką w formie flagi.

Interfejs App Badging API umożliwia zainstalowanym aplikacjom internetowym ustawianie plakietki dla całej aplikacji, która jest wyświetlana w miejscu związanym z aplikacją w systemie operacyjnym (np. na półce lub ekranie głównym).

Oznaczenia umożliwiają subtelne powiadamianie użytkownika o nowej aktywności, która może wymagać jego uwagi, lub wskazywanie niewielkiej ilości informacji, np. liczby nieprzeczytanych wiadomości.

Odznaki są zwykle bardziej przyjazne dla użytkownika niż powiadomienia i można je aktualizować z dużo większą częstotliwością, ponieważ nie przerywają pracy użytkownika. Nie przeszkadzają one użytkownikowi, więc nie wymagają jego zgody.

Możliwe przypadki użycia

Przykłady aplikacji, które mogą korzystać z tego interfejsu API:

  • aplikacje do czatu, poczty e-mail i mediów społecznościowych, aby sygnalizować nadejście nowych wiadomości lub wyświetlać liczbę nieprzeczytanych elementów;
  • Aplikacje zwiększające produktywność, aby sygnalizować zakończenie długotrwałego zadania w tle (np. renderowania obrazu lub filmu).
  • Gry – aby zasygnalizować, że wymagane jest działanie gracza (np. w szachach, gdy przychodzi jego kolej).

Pomoc

Interfejs App Badging API działa w systemach Windows i macOS w Chrome 81 i Edge 81 lub nowszych. Pracujemy nad obsługą ChromeOS, która będzie dostępna w przyszłej wersji. Interfejs Badging API nie jest obsługiwany na Androidzie. Zamiast tego Android automatycznie wyświetla plakietkę na ikonie zainstalowanej aplikacji internetowej, gdy jest nieprzeczytane powiadomienie, tak samo jak w przypadku aplikacji na Androida.

Wypróbuj

  1. Otwórz wersję demonstracyjną interfejsu App Badging API.
  2. Gdy pojawi się odpowiedni komunikat, kliknij Zainstaluj, aby zainstalować aplikację, lub użyj menu Chrome.
  3. Otwórz ją jako zainstalowaną PWA. Pamiętaj, że musi być uruchomiona jako zainstalowana aplikacja PWA (na pasku zadań lub w docku).
  4. Kliknij przycisk Ustaw lub Wyczyść, aby ustawić lub wyczyścić plakietkę na ikonie aplikacji. Możesz też podać liczbę w polu Wartość plakietki.

Jak korzystać z interfejsu App Badging API

Aby korzystać z interfejsu App Badging API, aplikacja internetowa musi spełniać kryteria instalacji w Chrome, a użytkownicy muszą dodać ją do ekranu głównego.

Interfejs Badge API zawiera 2 metody w navigator:

  • setAppBadge(number): ustawia plakietkę aplikacji. Jeśli podano wartość, ustaw odznakę na tę wartość. W przeciwnym razie wyświetl zwykłą białą kropkę (lub inną flagę odpowiednią dla platformy). Ustawienie number na 0 jest równoznaczne z wywołaniem clearAppBadge().
  • clearAppBadge(): usuwa plakietkę aplikacji.

Oba zwracają puste obietnice, których możesz użyć do obsługi błędów.

Odznakę można ustawić na bieżącej stronie lub w zarejestrowanym skrypcie service worker. Aby ustawić lub wyczyścić plakietkę (na stronie na pierwszym planie lub w procesie service worker), wywołaj:

// 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.
});

W niektórych przypadkach system operacyjny może nie zezwalać na dokładne wyświetlanie plakietki. W takich przypadkach przeglądarka spróbuje zapewnić najlepszą reprezentację na danym urządzeniu. Na przykład interfejs Badging API nie jest obsługiwany na Androidzie, więc na tym systemie zawsze wyświetlana jest kropka zamiast wartości liczbowej.

Nie zakładaj niczego na temat tego, jak klient użytkownika wyświetla odznakę. Niektóre programy klienckie mogą wziąć liczbę, np. „4000”, i przepisać ją jako „99+”. Jeśli samodzielnie ustawisz maksymalną wartość plakietki (np. „99”), znak „+” się nie pojawi. Niezależnie od rzeczywistej liczby wystarczy wywołać funkcję setAppBadge(unreadCount), a przeglądarka zajmie się odpowiednim wyświetleniem.

Interfejs App Badging API w Chrome wymaga zainstalowanej aplikacji, ale nie należy uzależniać wywołań interfejsu Badging API od stanu instalacji. Po prostu wywołaj interfejs API, gdy jest dostępny, ponieważ inne przeglądarki mogą wyświetlać plakietkę w innych miejscach. Jeśli działa, to działa. Jeśli nie, po prostu nie będzie.

Ustawianie i usuwanie plakietki w tle za pomocą komponentu service worker

Możesz też ustawić plakietkę aplikacji w tle za pomocą komponentu service worker. Możesz to zrobić za pomocą okresowej synchronizacji w tle, interfejsu Push API lub obu tych metod.

Okresowa synchronizacja w tle

Okresowa synchronizacja w tle umożliwia procesowi roboczemu usługi okresowe odpytywanie serwera, co może służyć do uzyskiwania zaktualizowanego stanu i wywoływania funkcji navigator.setAppBadge().

Częstotliwość wywoływania synchronizacji nie jest jednak w pełni niezawodna i zależy od przeglądarki.

Web Push API

Push API umożliwia serwerom wysyłanie wiadomości do procesów usługi, które mogą uruchamiać kod JavaScript nawet wtedy, gdy nie jest uruchomiona żadna strona na pierwszym planie. W ten sposób push serwera może zaktualizować plakietkę, wywołując navigator.setAppBadge().

Jednak większość przeglądarek, w tym Chrome, wymaga wyświetlania powiadomienia za każdym razem, gdy zostanie odebrana wiadomość push. W niektórych przypadkach jest to w porządku (np. wyświetlanie powiadomienia podczas aktualizowania plakietki), ale uniemożliwia subtelne aktualizowanie plakietki bez wyświetlania powiadomienia.

Aby użytkownicy mogli otrzymywać wiadomości push, muszą też przyznać Twojej witrynie uprawnienia do wysyłania powiadomień.

kombinacja obu tych elementów.

Nie jest to idealne rozwiązanie, ale połączenie interfejsu Push API i okresowej synchronizacji w tle sprawdza się całkiem dobrze. Informacje o wysokim priorytecie są dostarczane za pomocą interfejsu Push API, który wyświetla powiadomienie i aktualizuje plakietkę. Informacje o niższym priorytecie są dostarczane przez aktualizację plakietki, gdy strona jest otwarta lub w ramach okresowej synchronizacji w tle.

Prześlij opinię

Zespół Chrome chce poznać Twoje wrażenia związane z korzystaniem z interfejsu App Badging API.

Opisz projekt interfejsu API

Czy w API jest coś, co nie działa zgodnie z oczekiwaniami? Czy brakuje metod lub właściwości, których potrzebujesz do realizacji swojego pomysłu? Masz pytanie lub komentarz dotyczący modelu zabezpieczeń?

Zgłaszanie problemu z implementacją

Czy w implementacji Chrome występuje błąd? Czy implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtwarzania problemu i ustaw Komponenty na UI>Browser>WebAppInstalls.

Wyrażanie poparcia dla interfejsu API

Planujesz używać interfejsu App Badging API w swojej witrynie? Twoje publiczne wsparcie pomaga zespołowi Chrome określać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wspieranie.

Przydatne linki

Zdjęcie banera powitalnego: Prateek Katyal, Unsplash