Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • Lighthouse 마스크 가능 아이콘 감사가 실패하는 방법
  • PWA에 마스크 가능 아이콘 지원을 추가하는 방법

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

May 6, 2020
Available in: Español, 日本語, Português, Русский, 中文, English
이 페이지에서
  • Lighthouse 마스크 가능 아이콘 감사가 실패하는 방법
  • PWA에 마스크 가능 아이콘 지원을 추가하는 방법

마스크 가능 아이콘은 모든 Android 기기에서 PWA 아이콘이 멋지게 보이도록 하는 새로운 아이콘 형식입니다. 최신 Android 기기에서 마스크 가능한 아이콘 형식을 따르지 않는 PWA 아이콘에는 흰색 배경이 제공됩니다. 마스크 가능한 아이콘을 사용하면 아이콘이 Android에서 제공하는 모든 공간을 차지하게 됩니다.

Lighthouse 마스크 가능 아이콘 감사가 실패하는 방법 #

마스크 가능 아이콘 지원이 없는 Lighthouse 플래그 페이지:

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

감사 통과 방법:

  • 웹 앱 매니페스트가 있어야 합니다.
  • 웹 앱 매니페스트에는 icons 배열이 있어야 합니다.
  • icons purpose 속성이 있는 하나의 객체가 포함되어야 하고 purpose maskable이 포함되어야 합니다.

주의

Lighthouse는 마스크 가능 아이콘으로 지정된 이미지를 검사하지 않습니다. 이미지가 잘 표시되는지 수동으로 확인해야 합니다.
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

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

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

  2. 웹 앱 매니페스트의 icons 개체 중 하나에 purpose 속성을 추가합니다. purpose의 값을 maskable 또는 any maskable로 설정하십시오. 값을 참조하십시오.

    {
    …
    "icons": [
    …
    {
    "src": "path/to/maskable_icon.png",
    "sizes": "196x196",
    "type": "image/png",
    "purpose": "any maskable"
    }
    ]
    …
    }
  3. Chrome DevTools를 사용하여 마스크 가능 아이콘이 올바르게 표시되는지 확인합니다. 현재 아이콘이 준비되었습니까?를 참조하십시오.

자원 #

  • 매니페스트의 소스 코드에 마스크 가능 아이콘 감사 없음
  • 마스크 가능 아이콘이 있는 PWA의 적응형 아이콘 지원
  • Maskable.app 편집기
  • 웹 앱 매니페스트 추가
  • MDN의 icons 속성
마지막 업데이트: May 6, 2020 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.