마스크 가능한 아이콘은 모든 Android 기기에서 PWA 아이콘이 멋지게 표시되도록 하는 새로운 아이콘 형식입니다. 최신 Android 기기에서 마스크 가능한 아이콘 형식을 따르지 않는 PWA 아이콘에는 흰색 배경이 표시됩니다. 마스크 가능한 아이콘을 사용하면 Android에서 제공하는 모든 공간을 아이콘이 차지합니다.
Lighthouse 마스크 가능 아이콘 감사가 실패하는 경우
Lighthouse는 마스크 가능한 아이콘을 지원하지 않는 페이지를 신고합니다.
감사를 통과하려면 다음 요건을 충족해야 합니다.
- 웹 앱 매니페스트가 있어야 합니다.
- 웹 앱 매니페스트에는
icons
배열이 있어야 합니다. icons
배열에는purpose
속성이 있는 객체 한 개가 포함되어야 하고 해당purpose
속성의 값에는maskable
가 포함되어야 합니다.
PWA에 마스크 가능한 아이콘 지원을 추가하는 방법
- Maskable.app Editor를 사용하여 기존 아이콘을 마스크 가능한 아이콘으로 변환합니다.
웹 앱 매니페스트의
icons
객체 중 하나에purpose
속성을 추가합니다.purpose
값을maskable
로 설정합니다. 값을 참조하세요.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Chrome DevTools를 사용하여 마스크 가능한 아이콘이 올바르게 표시되는지 확인합니다. 현재 아이콘을 사용할 준비가 되었나요?를 참고하세요.