매니페스트에 마스크 가능한 아이콘이 없음

마스크 가능한 아이콘은 PWA 아이콘이 표시되는지 확인하는 새로운 아이콘 형식입니다. 모든 Android 기기에서 잘 작동합니다. 최신 Android 기기에서 PWA 아이콘을 따르지 않음 마스크 가능한 아이콘 형식의 배경은 흰색입니다. 마스킹 가능한 Android에서 제공하는 모든 공간을 차지하도록 합니다.

Lighthouse 마스킹 가능한 아이콘 감사가 실패하는 방식

등대 마스크 가능한 아이콘을 지원하지 않는 페이지를 표시합니다.

Lighthouse 보고서 UI의 마스킹 가능한 아이콘 감사.

감사를 통과하려면 다음 요건을 충족해야 합니다.

  • 웹 앱 매니페스트가 있어야 합니다.
  • 웹 앱 매니페스트에는 icons 배열이 있어야 합니다.
  • icons 배열에는 purpose 속성이 있는 객체 1개가 포함되어야 합니다. 해당 purpose 속성의 값에는 maskable가 포함되어야 합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

PWA에 마스크 가능한 아이콘 지원을 추가하는 방법

  1. Maskable.app Editor를 사용하여 기존 아이콘을 마스크 가능한 아이콘으로 변환합니다.

  2. purpose 속성을 웹 앱 매니페스트의 icons 객체 중 하나에 추가합니다. purpose 값을 maskable로 설정합니다. 값을 참조하세요.

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

  3. Chrome DevTools를 사용하여 마스크 가능한 아이콘이 올바르게 표시되는지 확인합니다. 현재 아이콘이 준비되었나요?를 참고하세요.

리소스