Obsługa ikon adaptacyjnych w PWA z ikonami z maskowaniem

Ikony aplikacji, które dostosowują się do platformy.

Thomas Steiner

Dęba tygrysa

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.