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

Ikony z możliwością zabezpieczenia to nowy format ikon, który zapewnia wygląd ikony PWA. na wszystkich urządzeniach z Androidem. Na nowszych urządzeniach z Androidem nie pojawiają się ikony PWA ikony z maskowaniem mają białe tło. Gdy używasz elementu z możliwością maskowania ikona zajmuje całe miejsce dostępne w 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:

Audyt ikony z możliwością maskowania w interfejsie raportu Lighthouse.

Aby przejść kontrolę:

  • Musi istnieć plik manifestu aplikacji internetowej.
  • Manifest aplikacji internetowej musi mieć 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ć obsługę ikony z możliwością maskowania do aplikacji PWA

  1. Za pomocą edytora Maskable.app możesz przekonwertować istniejącą ikonę na ikonę z możliwością maskowania.

  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. Za pomocą Narzędzi deweloperskich w Chrome sprawdź, czy ikona z możliwością maskowania wyświetla się prawidłowo. Zobacz Czy moje bieżące ikony są gotowe?

Zasoby