Plakietki ikon aplikacji

Interfejs App Badging API umożliwia zainstalowanym aplikacjom internetowym ustawienie plakietki 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 innej aplikacji z plakietką typu flaga.

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

Plakietki ułatwiają subtelne informowanie użytkownika o nowej aktywności, która może wymagać jego uwagi, lub o małej ilości informacji, np. o liczbie nieprzeczytanych wiadomości.

Plakietki są zazwyczaj bardziej przyjazne użytkownikowi niż powiadomienia i można je aktualizować znacznie częściej, ponieważ nie przerywają one pracy użytkownika. Ponieważ nie przeszkadzają użytkownikowi, nie wymagają jego zgody.

Możliwe zastosowania

Przykłady aplikacji, które mogą używać tego interfejsu API:

  • Aplikacje do czatu, poczty e-mail i mediów społecznościowych, aby sygnalizować, że dotarły nowe wiadomości lub aby wyświetlić liczbę nieprzeczytanych elementów.
  • aplikacje do produktywności, aby sygnalizować, że długotrwałe zadanie w tle (np. renderowanie obrazu lub filmu) zostało ukończone;
  • gry sygnalizujące, że wymagane jest działanie gracza (np. w szachach, gdy nadchodzi kolej gracza);

Pomoc

Interfejs App Badging API działa w systemach Windows i macOS w Chrome 81 i Edge 81 lub nowszych. Obsługa ChromeOS jest w fazie rozwoju i będzie dostępna w przyszłej wersji. W Androidzie interfejs Badging API nie jest obsługiwany. Zamiast tego Android automatycznie wyświetla plakietkę na ikonie zainstalowanej aplikacji internetowej, gdy jest nieprzeczytane powiadomienie, tak jak w przypadku aplikacji na Androida.

Wypróbuj

  1. Otwórz demonstrację 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ą aplikację PWA. Pamiętaj, że musi ona działać jako zainstalowana PWA (na pasku aplikacji lub na docku).
  4. Kliknij przycisk Ustaw lub Wyczyść, aby ustawić lub usunąć plakietkę z ikony aplikacji. Możesz też podać liczbę w polu Wartość plakietki.

Jak korzystać z interfejsu App Badging API

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

Interfejs Badge API składa się z 2 metod na navigator:

  • setAppBadge(number): ustawia plakietkę aplikacji. Jeśli podano wartość, ustaw plakietkę na podawaną wartość. W przeciwnym razie wyświetl białą kropkę (lub inny odpowiedni flagę dla danej platformy). Ustawienie number na 0 jest takie samo jak wywoływanie clearAppBadge().
  • clearAppBadge(): usuwa plakietkę aplikacji.

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

Plakietkę można ustawić na bieżącej stronie lub w zarejestrowanym skrypcie service worker. Aby ustawić lub wyczyścić plakietkę (na stronie pierwszego planu lub w usługach workera), 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 będzie próbować wyświetlić najlepszą wersję dla danego urządzenia. Na przykład interfejs Badging API nie jest obsługiwany na Androidzie, więc zamiast wartości liczbowej wyświetla się tylko kropka.

Nie zakładaj niczego na temat sposobu wyświetlania plakietki przez klienta użytkownika. Niektóre przeglądarki mogą zamienić liczbę, np. „4000”, na „99+”. Jeśli sam spróbujesz nasycić plakietkę (np. ustawiając ją na „99”), znak „+” nie będzie widoczny. Niezależnie od tego, jaki jest rzeczywisty numer, po prostu wywołaj funkcję setAppBadge(unreadCount), a agent użytkownika zajmie się wyświetleniem go.

Chociaż interfejs App Badging API w Chrome wymaga zainstalowania aplikacji, nie należy wywoływać interfejsu Badging API w zależności od stanu instalacji. Wystarczy wywołać interfejs API, jeśli istnieje, 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 czyszczenie plakietki w tle z użyciem service workera

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

Okresowa synchronizacja w tle

Okresowa synchronizacja w tle umożliwia usługowemu workerowi okresowe sprawdzanie stanu serwera, co może służyć do aktualizowania stanu i wywołania navigator.setAppBadge().

Częstotliwość wywoływania synchronizacji nie jest jednak w pełni pewna i jest wywoływana według uznania przeglądarki.

Interfejs Web Push API

Push API umożliwia serwerom wysyłanie wiadomości do usług działających w tle, które mogą uruchamiać kod JavaScript nawet wtedy, gdy nie działa żadna strona w tle. Komunikat push z serwera może więc zaktualizować plakietkę, wywołując funkcję navigator.setAppBadge().

Jednak większość przeglądarek, w tym Chrome, wymaga wyświetlania powiadomienia za każdym razem, gdy otrzymasz powiadomienie push. Jest to odpowiednie w niektórych przypadkach użycia (np. wyświetlanie powiadomienia podczas aktualizowania plakietki), ale uniemożliwia drobną zmianę plakietki bez wyświetlania powiadomienia.

Aby otrzymywać powiadomienia push, użytkownicy muszą też zezwolić na powiadomienia z Twojej witryny.

kombinacja obu typów.

Chociaż nie jest to idealne rozwiązanie, korzystanie z interfejsu Push API i okresowej synchronizacji w tle stanowi dobre rozwiązanie. Informacje o wysokiej priorytecie są dostarczane za pomocą interfejsu API Push, wyświetlając powiadomienie i aktualizując plakietkę. Informacje o mniejszym priorytecie są dostarczane przez aktualizację plakietki, gdy strona jest otwarta, lub przez okresową synchronizację w tle.

Prześlij opinię

Zespół Chrome chce poznać Twoje wrażenia z korzystania z interfejsu App Badging API.

Prześlij informacje o projektowaniu interfejsu API

Czy coś w interfejsie API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu? Masz pytania lub uwagi dotyczące modelu bezpieczeństwa?

  • Zgłoś problem ze specyfikacją w repozytorium Badging API na GitHubie lub dodaj swoje uwagi do istniejącego problemu.

Zgłaszanie problemów z implementacją

Czy znalazłeś/znalazłaś błąd w implementacji Chrome? A może implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtworzenia błędu i ustaw Składniki na UI>Browser>WebAppInstalls. Glitch świetnie sprawdza się do udostępniania szybkich i prostych reprodukcji.

Pokaż informacje o pomocy dotyczącej interfejsu API

Planujesz użyć w swojej witrynie interfejsu App Badging API? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Przydatne linki

Zdjęcie bohatera: Prateek Katyal, Unsplash