Plakietki ikon aplikacji

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

Pete LePage

Czym jest interfejs App Badging API?

Przykład: Twitter z 8 powiadomieniami i inną aplikacją z plakietką typu flaga.
Przykład: Twitter z 8 powiadomieniami i inna aplikacja z plakietką typu flaga.

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

Plakietki ułatwiają subtelne powiadamianie użytkownika o nowej aktywności, która może wymagać jego uwagi, lub wskazanie niewielkiej ilości informacji, np. liczby nieprzeczytanych.

Plakietki są zazwyczaj wygodniejsze w użyciu niż powiadomienia i można je aktualizować ze znacznie większą częstotliwością, ponieważ nie przeszkadzają użytkownikowi. A ponieważ nie zakłócają one działania użytkownika, nie potrzebują zgody użytkownika.

Możliwe przypadki użycia

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

  • Czat, poczta e-mail i aplikacje społecznościowe, aby zasygnalizować otrzymanie nowych wiadomości lub wyświetlić liczbę nieprzeczytanych elementów.
  • aplikacje zwiększające produktywność, aby zasygnalizować zakończenie długo trwającego zadania w tle (np. renderowania obrazu lub filmu);
  • Gry, które zasygnalizują, że wymagane jest działanie gracza (np. w szachach, gdy jest ruch użytkownika).

Pomoc

Interfejs App Badging API działa w systemach Windows i macOS w Chrome 81 i Edge 81 i nowszych. Obsługa ChromeOS jest w fazie opracowywania i będzie dostępna w przyszłej wersji. Na urządzeniach z Androidem interfejs API Badging nie jest obsługiwany. Zamiast tego, tak jak w przypadku aplikacji na Androida, na ikonie zainstalowanej aplikacji internetowej wyświetla się plakietka, gdy użytkownik ma nieprzeczytane powiadomienie.

Wypróbuj

  1. Otwórz prezentację interfejsu App Badging API.
  2. Gdy pojawi się prośba, kliknij Zainstaluj, by zainstalować aplikację, lub skorzystaj z menu Chrome, by ją zainstalować.
  3. Otwórz go jako zainstalowaną aplikację PWA. Pamiętaj, że musi ona być uruchomiona jako zainstalowana aplikacja PWA (na pasku zadań lub w Docku).
  4. Kliknij przycisk Ustaw lub Wyczyść, aby ustawić lub usunąć plakietkę z ikony aplikacji. Możesz też podać wartość plakietki.

Jak korzystać z interfejsu App Badging API

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

Interfejs Connector API w navigator korzysta z 2 metod:

  • setAppBadge(number): ustawia plakietkę aplikacji. Jeśli jest podana, ustaw plakietkę na taką, która jest podana w innym przypadku. W przeciwnym razie pojawi się biała kropka (lub inna flaga, zależnie od platformy). Ustawienie elementu number na 0 jest równoznaczne z wywołaniem clearAppBadge().
  • clearAppBadge(): usuwa plakietkę aplikacji.

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

Plakietkę można ustawić na bieżącej stronie lub przez zarejestrowany skrypt service worker. Aby ustawić lub usunąć plakietkę (na stronie na pierwszym planie lub w skrypcie 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 dopuszczać dokładnego przedstawienia plakietki. W takim przypadku przeglądarka spróbuje jak najlepiej wyświetlić dane urządzenie. Przykład: interfejs API Badging nie jest obsługiwany na Androidzie, dlatego 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 klienty użytkownika mogą przyjąć liczbę taką jak „4000” i zmienić ją na „99+”. Jeśli samodzielnie nasycisz plakietkę (np. ustawiając jej wartość na „99”), znak „+” się nie pojawi. Po prostu wywołaj setAppBadge(unreadCount) i pozwól klientowi użytkownika na jego wyświetlenie.

Chociaż interfejs App Badging API w Chrome wymaga zainstalowania aplikacji, nie należy wywoływać tego interfejsu API zależnie od stanu instalacji. Wywołaj odpowiedni interfejs API, jeśli istnieje, ponieważ inne przeglądarki mogą go wyświetlać w innych miejscach. Jeśli działa, to znaczy, że działa. Jeśli nie, po prostu nie działa.

Ustawianie i usuwanie plakietki w tle z poziomu skryptu service worker

Możesz też ustawić plakietkę aplikacji w tle za pomocą skryptu 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 mechanizmowi Service Worker okresowe odpytywanie serwera, co może służyć do uzyskiwania zaktualizowanego stanu i wywołania navigator.setAppBadge().

Jednak częstotliwość wywoływania synchronizacji nie jest idealna i jest określana według uznania przeglądarki.

Interfejs API Web Push API

Push API pozwala serwerom wysyłać komunikaty do skryptów service worker, które mogą uruchamiać kod JavaScript nawet wtedy, gdy nie jest uruchomiona żadna strona na pierwszym planie. Dlatego polecenie push z serwera może zaktualizować plakietkę, wywołując navigator.setAppBadge().

Jednak większość przeglądarek (w tym Chrome) wymaga, aby po otrzymaniu wiadomości push było wyświetlane powiadomienie. W niektórych przypadkach może to być przydatne (np. wyświetlanie powiadomienia podczas aktualizowania plakietki), ale subtelne modyfikowanie plakietki bez wyświetlenia powiadomienia jest niemożliwe.

Oprócz tego, aby otrzymywać wiadomości push, użytkownicy muszą przyznać witrynie uprawnienia do powiadomień.

oba te cele.

Choć nie jest to idealne rozwiązanie, zastosowanie interfejsu Push API i okresowej synchronizacji w tle mogą stanowić dobre rozwiązanie. Informacje o wysokim priorytecie są dostarczane przez interfejs Push API i wyświetlają powiadomienie i aktualizują plakietkę. Informacje o niższym priorytecie są dostarczane przez aktualizowanie plakietki, gdy strona jest otwarta, lub poprzez okresową synchronizację w tle.

Prześlij opinię

Zespół Chrome chce poznać Twoją opinię o interfejsie App Badging API.

Opowiedz nam o projekcie interfejsu API

Czy interfejs API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do realizacji swojego pomysłu? Czy masz pytanie lub komentarz na temat modelu zabezpieczeń?

Zgłoś problem z implementacją

Czy wystąpił błąd związany z implementacją przeglądarki Chrome? A może implementacja różni się od specyfikacji?

  • Zgłoś błąd na https://new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje odtwarzania oraz ustaw Komponenty na UI>Browser>WebAppInstalls. Usterki to świetny sposób na udostępnianie szybkich i łatwych do odtworzenia kopii filmów.

Pokaż obsługę interfejsu API

Planujesz używać w witrynie interfejsu App Badging API? Twoja publiczna pomoc pomaga zespołowi Chrome priorytetowo traktować funkcje, a innym dostawcom przeglądarek pokazuje, jak ważne jest ich wsparcie.

  • Wyślij tweeta na adres @ChromiumDev, używając hashtagu #BadgingAPI, i daj nam znać, gdzie i w jaki sposób go używasz.

Przydatne linki

Główne zdjęcie, którego autorem jest Prateek Katyal, na kanale Unsplash