매니페스트에 마스크 가능한 아이콘이 없음
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
마스크 가능한 아이콘 은 모든 Android 기기에서 PWA 아이콘이 멋지게 표시되도록 하는 새로운 아이콘 형식입니다. 최신 Android 기기에서 마스크 가능한 아이콘 형식을 따르지 않는 PWA 아이콘에는 흰색 배경이 표시됩니다. 마스크 가능한 아이콘을 사용하면 Android에서 제공하는 모든 공간을 아이콘이 차지합니다.
Lighthouse 마스크 가능 아이콘 감사가 실패하는 경우
Lighthouse 는 마스크 가능한 아이콘을 지원하지 않는 페이지를 신고합니다.
감사를 통과하려면 다음 요건을 충족해야 합니다.
웹 앱 매니페스트가 있어야 합니다.
웹 앱 매니페스트에는 icons
배열이 있어야 합니다.
icons
배열에는 purpose
속성이 있는 객체 한 개가 포함되어야 하고 해당 purpose
속성의 값에는 maskable
가 포함되어야 합니다.
주의: Lighthouse는 마스크 가능한 아이콘으로 지정된 이미지를 검사하지 않습니다.
이미지가 제대로 표시되는지 직접 확인해야 합니다.
참고: 각 권장사항 감사에는 Lighthouse 권장사항 점수에 동일한 가중치가 적용됩니다. 권장사항 점수 에서 자세히 알아보세요.
PWA에 마스크 가능한 아이콘 지원을 추가하는 방법
Maskable.app Editor 를 사용하여 기존 아이콘을 마스크 가능한 아이콘으로 변환합니다.
웹 앱 매니페스트 의 icons
객체 중 하나에 purpose
속성을 추가합니다.
purpose
값을 maskable
로 설정합니다. 값 을 참조하세요.
{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable"
}
]
…
}
Chrome DevTools를 사용하여 마스크 가능한 아이콘이 올바르게 표시되는지 확인합니다.
현재 아이콘을 사용할 준비가 되었나요? 를 참고하세요.
자료
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-04-16(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]