Ikony aplikacji, które dostosowują się do platformy.
Czym są ikony z możliwością maskowania?
Jeśli na jednym z nowych telefonów z Androidem masz zainstalowaną progresywną aplikację internetową, możesz zauważyć, że jej ikona ma białe tło. W Androidzie Oreo wprowadzono ikony adaptacyjne, które wyświetlają ikony aplikacji w różnych kształtach na różnych modelach urządzeń. Ikony, które są niezgodne z nowym formatem, mają białe tło.
Ikony z możliwością maskowania to nowy format ikon, który daje większą kontrolę i pozwala progresywnej aplikacji internetowej używać ikon adaptacyjnych. Jeśli dodasz ikonę z możliwością maskowania, będzie ona wypełniała cały kształt i będzie wyglądać świetnie na wszystkich urządzeniach z Androidem. Niedawno dodaliśmy obsługę tego formatu w przeglądarkach Firefox i Chrome, które można wdrożyć w swoich aplikacjach.
Czy moje obecne ikony są gotowe?
Ikony z możliwością maskowania muszą obsługiwać różne kształty, dlatego ustawia się nieprzezroczysty obraz z dopełnieniem, które przeglądarka może przyciąć do odpowiedniego rozmiaru i kształtu. Lepiej nie polegać na żadnym konkretnym kształcie, bo ostateczny kształt będzie się różnić w zależności od przeglądarki i platformy.
Na szczęście istnieje dobrze zdefiniowana i ustandaryzowana „minimalna bezpieczna strefa”, którą respektują wszystkie platformy. Ważne części ikony, np. logo, powinny znajdować się w okrągłym obszarze pośrodku ikony i mieć promień równy 40% szerokości ikony. Zewnętrzne 10% krawędzi może zostać przycięte.
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ą obcięte, tak aby widoczna była tylko bezpieczny obszar. Jeśli logo jest widoczne w tym bezpiecznym obszarze, nie musisz nic robić.
Aby przetestować ikonę z możliwością maskowania w różnych kształtach Androida, użyj narzędzia Maskable.app i utwórz Tigera. Otwórz ikonę, a następnie Maskable.app umożliwi Ci wypróbowanie różnych kształtów i rozmiarów. Możesz też udostępnić podgląd innym członkom zespołu.
Jak wdrożyć ikony z możliwością maskowania?
Jeśli chcesz utworzyć ikonę z możliwością maskowania na podstawie istniejącej ikony, możesz użyć edytora Maskable.app. Prześlij ikonę, dostosuj jej 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
.
Jeśli chcesz dodać ikony z możliwością maskowania, pole purpose
informuje przeglądarkę, jak ma wyglądać ikona. Domyślnie ikony mają przeznaczenie "any"
. Rozmiar ikon zostanie zmieniony na białe tło na Androidzie.
{
…
"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"`
},
…
],
…
}
Ikony z możliwością maskowania powinny mieć inną wartość w polu purpose
: "maskable"
. Oznacza to, że obrazu należy używać z maskami ikon, co zapewnia większą kontrolę nad wynikiem.
Dzięki temu ikony nie będą miały białego tła. 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.
Mając to na uwadze, możesz tworzyć własne ikony z maskowaniem, aby aplikacja wyglądała dobrze od krawędzi do krawędzi (i za ile jest koło-okrągły czy owalna 😄).
Podziękowania
Autor artykułu: Joe Medley.