Plik manifestu nie ma ikony z możliwością maskowania

Maskowalne ikony to nowy format ikony, który zapewnia, że ikona PWA będzie dobrze wyglądać na wszystkich urządzeniach z Androidem. Na nowszych urządzeniach z Androidem ikony PWA, które nie są zgodne z formatem ikony z możliwością zamaskowania, mają białe tło. Gdy używasz ikony z możliwością maskowania, zajmuje ona całą dostępną na Androidzie przestrzeń.

Dlaczego audyt ikony możliwych do ukrycia w Lighthouse kończy się niepowodzeniem

Lighthouseflaguje strony, które nie obsługują ikon z możliwością maskowania:

Ikona, którą można ukryć, w interfejsie raportu Lighthouse.

Aby przejść weryfikację:

  • Musi istnieć plik manifestu aplikacji internetowej.
  • Plik manifestu aplikacji internetowej musi zawierać tablicę icons.
  • Tablica icons musi zawierać 1 obiekt z właściwością purpose, a wartość tej właściwości purpose musi zawierać maskable.

Jak dodać do PWA obsługę ikony z możliwością zamaskowania

  1. Użyj aplikacji Maskable.app Editor, aby przekonwertować dotychczasową ikonę na ikonę z możliwością zamaskowania.

  2. Dodaj właściwość purpose do jednego z obiektów icons w pliku manifestu aplikacji internetowej. Ustaw wartość purpose na maskable. Zobacz wartości.

    {
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

  3. Użyj Narzędzi deweloperskich w Chrome, aby sprawdzić, czy ikona z możliwością zamaskowania jest wyświetlana prawidłowo. Zobacz Czy moje obecne ikony są gotowe?

Zasoby