Jeśli na nowym telefonie z Androidem masz zainstalowaną progresywną aplikację internetową (PWA), możesz zauważyć, że jej ikona ma białe tło. W Androidzie 8.0 wprowadzono ikony adaptacyjne, które wyświetlają ikony aplikacji w różnych kształtach w zależności od modelu urządzenia. Ikony w innym formacie mają białe tło.
Ikony z możliwością maskowania to nowy format ikon w Chrome i Firefoksie, który pozwala progresywnej aplikacji internetowej na używanie ikon adaptacyjnych i daje większą kontrolę nad ich wyglądem.
Czy moje obecne ikony są gotowe?
Ikony z możliwością maskowania muszą obsługiwać różne kształty, dlatego trzeba dostarczyć nieprzezroczysty obraz z dopełnieniem, które przeglądarka może przyciąć do odpowiedniego kształtu i rozmiaru w przypadku dowolnej przeglądarki i platformy.
Specyfikacja ikon z możliwością maskowania zawiera standaryzowaną „minimalną bezpieczną strefę” respektowaną przez wszystkie platformy. Ważne części ikony, np. logo, muszą znajdować się w jednym okrągłym obszarze w jej środku i mieć promień równy 40% jej szerokości. Na niektórych platformach zewnętrzna 10-procentowa krawędź może być przycięta.
Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzić, które części ikon znajdują się w bezpiecznej strefie. Po otwarciu progresywnej aplikacji internetowej uruchom Narzędzia deweloperskie i przejdź do panelu Aplikacja. W sekcji Ikony możesz wybrać Pokazuj tylko minimalny bezpieczny obszar ikon z możliwością maskowania. Ikony zostaną wtedy obcięte i widoczny będzie tylko bezpieczny obszar. Jeśli logo jest widoczne w tym bezpiecznym obszarze, ikona jest gotowa.
Aby przetestować ikonę z maskowaniem w różnych kształtach Androida, użyj Maskable.app firmy Tiger Oakes. Otwórz ikonę, a aplikacja Maskable.app umożliwi wypróbowanie różnych kształtów i rozmiarów oraz udostępnienie podglądu swojemu zespołowi.
Jak wdrożyć ikony z możliwością maskowania?
Aby utworzyć ikonę z możliwością maskowania na podstawie istniejącej ikony, możesz użyć edytora Maskable.app. Prześlij ikonę, dostosuj kolor i rozmiar, a potem wyeksportuj obraz.
Po utworzeniu ikony z możliwością maskowania i przetestowaniu jej 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 i zawiera tablicę icons.
Pole purpose informuje przeglądarkę, jak ma wyglądać ikona. Domyślnie ikony mają wartość "any". Na Androidzie rozmiary tych ikon są zmieniane
na białym 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 ikona była maskowana, ustaw wartość purpose na "maskable", aby wskazać, że należy jej używać z maskami ikon. W ten sposób usuniesz białe tło
i uzyskasz większą kontrolę nad wyglądem ikony. Możesz też określić wiele celów rozdzielonych spacjami (np. "any maskable"), jeśli chcesz, aby ikona z maskowaniem była używana na innych urządzeniach bez maski.
Podziękowania
Ta strona została sprawdzona przez użytkownika Joe Medley.