웹 앱 매니페스트 유효성 검사기
웹 앱 매니페스트 사양에 대해 PWA 매니페스트.json을 검증하고 Android의 적응형 아이콘 안전 영역에 대해 마스크 가능한 아이콘을 미리 봅니다.
결과
프로그레시브 웹 앱은 매니페스트.json이 브라우저와 앱 스토어에서 실제로 확인하는 필드를 충족하는 경우에만 깔끔하게 설치됩니다. 이 유효성 검사기는 업로드된 매니페스트를 구문 분석하고 W3C 웹 앱 매니페스트 사양 필드를 필드별로 안내합니다. 누락된 이름 및 short_name, 비어 있거나 잘못된 형식의 아이콘 배열, src, 크기 또는 유형이 누락된 아이콘, 구문 분석할 수 없는 start_url, 인식할 수 없는 표시 값, 유효한 CSS 색상이 아닌 theme_color 또는 background_color 문자열에 플래그를 지정합니다. 모든 결과는 원시 사양 인용이 아닌 일반 영어 문장으로 표시되므로 무엇을 수정해야 할지, 설치 가능성에 중요한 이유를 정확히 알 수 있습니다.
킬러 기능은 마스크 가능한 아이콘 안전 지대 미리보기입니다. Android의 적응형 아이콘은 "목적": "마스크 가능"으로 표시된 모든 아이콘에 OS가 선택한 마스크 모양(원, 물결 모양, 눈물방울 등)을 적용합니다. 아이콘 뷰포트의 40%를 차지하는 중앙 원 외부의 모든 항목은 장치가 적용하는 마스크에 따라 잘릴 수 있습니다. 매니페스트에서 참조하는 아이콘 이미지 파일을 매니페스트.json과 함께 업로드하면 이 도구가 파일 이름별로 파일을 일치시키고 선언된 크기로 캔버스에 마스크 가능한 각 아이콘을 그리고 정확한 안전 영역 원을 오버레이하므로 아트웍이 자르기에서 살아남는지 직접 확인할 수 있습니다.
각 미리보기 아래에 있는 통과/실패 배지는 외관상 체크리스트 항목이 아닙니다. 이는 디코딩된 이미지 데이터의 실제 픽셀별 분석에서 나온 것입니다. 이 도구는 배경이 아닌 콘텐츠가 안전 영역 원 외부에 얼마나 많은지(마스크가 잘리는 콘텐츠) 아이콘이 얼마나 투명한지 측정합니다(투명도를 통해 기본 마스크 색상이 보이도록 하기 때문에 마스크 가능한 아이콘은 완전히 불투명한 배경을 가져야 합니다). 두 검사 모두 업로드한 실제 비트맵에 대해 실행되므로 결과는 추측이 아닌 실제 아이콘 파일을 반영합니다.
모든 작업은 브라우저에서 로컬로 발생합니다. File API를 사용하여 Manifest.json을 읽고, createImageBitmap 또는 FileReader/Image 대체를 사용하여 아이콘을 디코딩하고, 메모리 내 캔버스에서 픽셀을 분석합니다. 매니페스트가 아직 공개되지 않은 앱 이름, 내부 start_url 경로 또는 개발 중인 아이콘을 참조하는 경우 서버에 아무것도 업로드되지 않습니다.