Plakietki ikon aplikacji

Interfejs App Badging API umożliwia zainstalowanym aplikacjom internetowym plakietkę dla całej aplikacji na ikonie aplikacji.

Pete LePage

Czym jest interfejs App Badging API?

Przykład Twittera z 8 powiadomieniami i inną aplikacją z plakietką typu flagi.
Przykład Twittera z 8 powiadomieniami i inną aplikacją z flagą .

Interfejs App Badging API umożliwia zainstalowanym aplikacjom internetowym ustawienie plakietki dla całej aplikacji, w miejscu powiązanym z aplikacją w konkretnym systemie operacyjnym. (np. półkę lub ekran główny).

Plakietki ułatwiają subtelne powiadamianie użytkownika o nowej aktywności które mogą wymagać ich uwagi lub wskazać niewielką ilość informacje, takie jak liczba nieprzeczytanych wiadomości.

Plakietki są zwykle bardziej przyjazne dla użytkownika niż powiadomienia, więc można je aktualizować ze znacznie większą częstotliwością, ponieważ nie przeszkadzają użytkownikowi. oraz , ponieważ nie przeszkadzają użytkownikowi, nie potrzebują jego zgody.

Możliwe przypadki użycia

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

  • czatu, poczty e-mail i aplikacji społecznościowych w celu sygnalizowania nowych wiadomości lub pokazuje liczbę nieprzeczytanych elementów.
  • aplikacje zwiększające produktywność, które sygnalizują, że długotrwałe zadanie w tle (takie jak renderowania obrazu lub filmu).
  • gry, aby zasygnalizować, że wymagane jest działanie gracza (np. w szachach, gdy to kolej gracza).

Pomoc

Interfejs App Badging API działa w systemach Windows i macOS w Chrome 81 oraz Edge 81 i nowszych. Obsługa ChromeOS jest w fazie rozwoju i zostanie udostępniona w przyszłości. wersji. W Androidzie interfejs Badging API nie jest obsługiwany. Zamiast tego: Android automatycznie wyświetla plakietkę na ikonie zainstalowanej aplikacji internetowej gdy pojawi się nieprzeczytane powiadomienie, tak jak w przypadku aplikacji na Androida.

Wypróbuj

  1. Otwórz aplikację Prezentacja interfejsu App Badging API
  2. Gdy pojawi się odpowiedni komunikat, kliknij Zainstaluj, aby zainstalować aplikację, lub użyj Chrome. , aby ją zainstalować.
  3. Otwórz ją jako zainstalowaną aplikację PWA. Uwaga: aplikacja musi działać jako zainstalowana aplikacja PWA (na pasku aplikacji lub w Docku).
  4. Kliknij przycisk Ustaw lub Wyczyść, aby ustawić lub usunąć plakietkę. . Możesz też podać liczbę w polu Wartość odznaki.

Jak korzystać z interfejsu App Badging API

Aby korzystać z interfejsu App Badging API, Twoja aplikacja internetowa musi spełniać kryteriów możliwości instalacji Chrome, a użytkownicy muszą dodać ją do ekranów głównych.

Interfejs Badge API wykorzystuje 2 metody w interfejsie navigator:

  • setAppBadge(number): ustawia plakietkę aplikacji. Jeśli została podana wartość, ustaw parametr w dowolnym miejscu, w przeciwnym razie wyświetl zwykłą białą kropkę (lub inną odpowiednio do danej platformy). Ustawienie wartości number na 0 jest takie samo jak Wywołuję clearAppBadge().
  • clearAppBadge(): usuwa plakietkę aplikacji.

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

Plakietkę można ustawić na bieżącej stronie lub w skrypt service worker. Aby ustawić lub usunąć plakietkę (na stronie na pierwszym planie lub skrypt 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ć dokładnie na reprezentację plakietki. W takich przypadkach przeglądarka spróbuje jak najlepiej reprezentować to urządzenie. Na przykład, ponieważ interfejs Badging API nie jest obsługiwany na Androidzie, Android wyświetla tylko kropkę zamiast wartości liczbowej.

Nie zakładaj żadnego sposobu wyświetlania plakietki przez klienta użytkownika. Niektóre klienty użytkownika mogą przyjmować wartości takie jak „4000” i przeredagować go jako „99+”. Jeśli samodzielnie nasycisz plakietkę (np. ustawiając ją na „99”) a następnie znak „+” nie zostaną wyświetlone. Po prostu zadzwoń pod numer setAppBadge(unreadCount) i pozwól klientowi użytkownika zająć się odpowiednio ją wyświetla.

Chociaż interfejs App Badging API w Chrome wymaga zainstalowania aplikacji, nie wywołujące interfejs Badging API w zależności od stanu instalacji. Wystarczy wywołać funkcję a w razie potrzeby interfejs API, ponieważ inne przeglądarki mogą wyświetlać plakietkę w innych miejscach. Jeśli działa, to znaczy, że działa. Jeśli nie, to po prostu nie.

Ustawianie i usuwanie plakietki w tle przez skrypt service worker

Możesz też ustawić plakietkę aplikacji w tle za pomocą skryptu service worker. Zrób to albo za pomocą okresowej synchronizacji w tle, interfejsu API Push lub połączenia obu tych metod.

Okresowa synchronizacja w tle

Okresowa synchronizacja w tle umożliwia mechanizmowi Service Worker okresowe sondowanie serwera w celu uzyskania zaktualizowanego stanu, i zadzwoń pod numer navigator.setAppBadge().

Częstotliwość wywoływania synchronizacji nie jest jednak idealna, i jest wywoływana według uznania przeglądarki.

Interfejs Web Push API

Interfejs API Push umożliwia serwerom wysyłanie wiadomości do mechanizmów Service Worker, który może uruchamiać kod JavaScript nawet wtedy, gdy żadna strona na pierwszym planie nie jest uruchomiona. W związku z tym: komunikat push z serwera może zaktualizować plakietkę, wywołując metodę navigator.setAppBadge().

Jednak większość przeglądarek, w tym Chrome, wymaga powiadomienia wyświetlane po otrzymaniu wiadomości push. W niektórych zastosowaniach to wystarczy (na przykład wyświetlanie powiadomienia podczas aktualizacji logo), ale nie umożliwia drobnej aktualizacji logo bez wyświetlania powiadomienia.

Dodatkowo użytkownicy muszą udzielić witrynie zgody na wyświetlanie powiadomień, odbieranie wiadomości push.

Kombinacja obu typów

Chociaż nie jest to idealne, używanie interfejsu Push API i okresowej synchronizacji w tle to dobre rozwiązanie. Informacje o wysokim priorytecie są dostarczane przez Push API z powiadomieniem i aktualizacją plakietki. Oraz niższy priorytet informacje są dostarczane przez aktualizację plakietki – zarówno wtedy, gdy strona jest otwarta, lub okresową synchronizację w tle.

Prześlij opinię

Zespół Chrome chce dowiedzieć się więcej o Twoich doświadczeniach z interfejsem App Badging API.

Opowiedz nam o konstrukcji interfejsu API

Czy jakiś interfejs API nie działa zgodnie z oczekiwaniami? są lub są brakuje metod lub właściwości potrzebnych do realizacji pomysłu? Czy masz pytanie lub komentarz na temat modelu zabezpieczeń?

Zgłoś problem z implementacją

Czy wystąpił błąd z implementacją Chrome? Czy wdrożenie różni się od specyfikacji?

  • Zgłoś błąd na https://new.crbug.com. Podaj jak najwięcej szczegółów możesz wykonać proste instrukcje odtwarzania i ustawić opcję Komponenty na UI>Browser>WebAppInstalls. Glitch działa świetnie: szybkie i łatwe reprodukcje.

Pokaż wsparcie dla interfejsu API

Planujesz zastosowanie w swojej witrynie interfejsu App Badging API? Twoje publiczne wsparcie pomaga Zespół Chrome nadaje priorytet funkcjom i pokazuje innym dostawcom przeglądarek, jak jest wspieranie ich.

Przydatne linki

Baner powitalny, zdjęcie: Prateek Katyal w Odchylenie