Po zainstalowaniu progresywnej aplikacji internetowej (PWA) na nowym telefonie z Androidem ikona aplikacji może mieć białe tło. Wprowadzenie Androida 8.0 ikon adaptacyjnych, które wyświetlają ikony aplikacji w różnych kształtach na różnych urządzeniach. modeli ML. Ikony, które nie korzystają z tego formatu, mają białe tło.
Ikony z możliwością maskowania to nowy format ikon w Chrome i Firefoksie, który pozwala Progresywna aplikacja internetowa korzysta z adaptacyjnych ikon i daje większą kontrolę nad wygląd ikony.
Czy moje bieżące ikony są gotowe?
Ikony z możliwością maskowania muszą obsługiwać różne kształty, więc musisz dodać nieprzezroczysty obraz z dopełnieniem, które przeglądarka może przyciąć do wymaganego rozmiaru kształtu i rozmiaru każdej przeglądarki i platformy.
Specyfikacja ikony z możliwością maskowania zawiera standaryzowany „minimalna bezpieczna strefa” respektowanych przez wszystkie platformy. Najważniejsze części takiej jak logo musi znajdować się w okrągłym obszarze pośrodku o promieniu równym 40% szerokości ikony. Zewnętrzna krawędź 10% może być przyciętych na niektórych platformach.
W Chrome możesz sprawdzić, które części ikon znajdują się w bezpiecznej strefie Narzędzia deweloperskie. Po otwarciu progresywnej aplikacji internetowej uruchom Narzędzia deweloperskie i wybierz panel Aplikacja. W sekcji Ikony możesz wybrać Pokazuj tylko minimalny bezpieczny obszar dla ikon z możliwością maskowania. Spowoduje to przycięcie ikon, więc widoczny jest tylko bezpieczny obszar. Jeśli logo jest widoczne w tym bezpiecznym obszarze, ikona jest gotowa.
Aby przetestować ikonę z możliwością maskowania w różnych kształtach Androida, użyj aplikacji Tiger Oakes Maskable.app, Otwórz ikonę, a Maskable.app umożliwi wypróbuj różne kształty i rozmiary, a potem udostępnij podgląd swojemu zespołowi.
Jak zastosować ikony z możliwością maskowania?
Aby utworzyć na podstawie istniejącej ikony z maskowaniem ikonę z maskowaniem, możesz użyć Edytor Maskable.app. Prześlij ikonę, dostosuj kolor i rozmiar, a potem wyeksportować obraz.
Gdy utworzysz ikonę z maskowaniem i przetestujesz ją w Narzędziach deweloperskich, musisz zaktualizować
plik manifestu aplikacji internetowej, aby wskazywał nowy zasób.
plik manifestu aplikacji internetowej zawiera informacje o aplikacji internetowej w pliku JSON.
zawiera tablicę icons.
Pole purpose informuje przeglądarkę, jak należy używać ikony. Domyślnie
mają przeznaczenie "any". W Androidzie rozmiar tych ikon jest zmieniany na biały
w tle.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Aby ikonę można było maskować, ustaw jej wartość purpose na "maskable", aby wskazać,
że należy go używać z maskami ikon. Spowoduje to usunięcie białego tła i
daje większą kontrolę nad wyglądem ikony. Możesz też określić wiele
oddzielone spacjami (np. "any maskable"), jeśli chcesz,
ikonę z możliwością maskowania do używania bez maski na innych urządzeniach.
Podziękowania
Ta strona została sprawdzona przez użytkownika Joe Medley.