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

Ikony z możliwością maskowania to nowy format ikon, który zapewnia, że Twoja ikona PWA wygląda świetnie na wszystkich urządzeniach z Androidem. Na nowszych urządzeniach z Androidem ikony PWA, które nie są zgodne z formatem z możliwością maskowania, mają białe tło. Gdy używasz ikony z możliwością maskowania, zajmuje ona całe miejsce dostępne na Androidzie.

Niepowodzenie kontroli ikony z możliwością maskowania w Lighthouse

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

Kontrola ikony z możliwością maskowania w interfejsie narzędzia Lighthouse Report.

Aby przejść audyt:

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

Jak dodać obsługę ikon z możliwością maskowania do aplikacji PWA

  1. Użyj edytora Maskable.app, aby przekształcić istniejącą ikonę w ikonę z możliwością maskowania.

  2. Dodaj właściwość purpose do jednego z obiektów icons w manifeście 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. Za pomocą Narzędzi deweloperskich w Chrome sprawdź, czy ikona z możliwością maskowania wyświetla się prawidłowo. Więcej informacji znajdziesz w sekcji Czy moje obecne ikony są gotowe?

Zasoby