마스크 가능한 아이콘 : PWA의 안드로이드 적응 아이콘

PWA (Progressive Web App) 용 Android 적응 아이콘 : 마스크 가능한 아이콘 가이드

PWA (Progressive Web Application)를 생성하고 현재 Android 홈 화면에 설치되는 해당 아이콘을 설계했습니다. 그러나 새로운 Android 폰을 사용하는 경우 아이콘이 다음과 같이 표시 될 수 있습니다.

무슨 일이야? Android Oreo는 모든 홈 화면 아이콘이 동일한 모양을 가져 오도록 강요하는 새로운 아이콘 형식 인 적응 형 아이콘을 소개합니다. 새 형식을 준수하지 않는 아이콘은 흰색 배경으로 표시됩니다.

그러나 Maskable Icons라는 새로운 웹 기능은 Firefox Preview 및 기타 웹 브라우저에서 곧 사용할 수 있습니다. 이 새로운 아이콘 형식을 사용하면 PWA가 Android에 자체 적응 아이콘을 가질 수 있습니다.

나는 Mozilla에서 일하고 Firefox 미리보기에서 마스크 가능한 아이콘에 대한 지원을 구현합니다. 자신의 Android PWA에 추가하는 방법을 보여 드리겠습니다.

마스크 가능한 아이콘과 적응 형 아이콘이란 무엇입니까?

몇 년 전, Android 앱 아이콘은 자유 형태였으며 어떤 모양 일 수 있습니다. 즉, 웹 앱은 홈 화면에 고정 될 때 동일한 투명 아이콘을 재사용 할 수 있습니다.

그러나 삼성과 같은 제조업체는 장치의 모든 아이콘을 일관성을 위해 동일한 모양을 갖기를 원합니다. 일부 제조업체는 다른 모양을 사용하기를 원합니다. Android는 제조업체 및 장치에 대한 다양한 요구 사항을 해결하기 위해 "적응 형 아이콘"을 도입했습니다. 안드로이드가 올바른 모양으로 자르는 가장자리 주위에 여분의 공간이있는 이미지를 제공합니다.

그러나 웹 응용 프로그램은 모든 플랫폼에서 실행되도록 설계되었으므로 이러한 특수 Android 아이콘을 만들기위한 API가 없습니다. 대신, 아이콘은 다음과 같은 흰색 상자에 압착됩니다.

지난 9 월에 새로운 API가 나타 났으며 W3C 사양에 추가 된 것은 기쁘게 생각합니다. 마스크 가능한 아이콘을 사용하면 웹 개발자가 자르는 완전 출혈 아이콘을 지정할 수 있습니다. 플랫폼 공연성이므로 Windows는 타일에 사용할 수 있으며 iOS는 아이콘에 사용할 수 있습니다.

마스크 가능한 아이콘을 만드는 방법

마스크 가능한 아이콘 형식은 모든 플랫폼에서 작동하도록 설계되었으므로 크기와 스케일은 Android의 적응 아이콘의 크기와 스케일과 다릅니다. 이것은 동일한 자원을 재사용 할 수 없다는 것을 의미합니다.

마스크 가능한 아이콘은 모든 크기 일 수 있으며 일반적인 투명 아이콘과 같은 크기를 계속 사용할 수 있습니다. 그러나 아이콘을 디자인 할 때 중요한 정보가 이미지 크기의 40%에 해당하는 반경을 가진 "안전 영역"원 안에 있는지 확인하십시오.

이 영역의 모든 픽셀이 보이는지 확인하십시오. 영역 외부의 픽셀은 아이콘 모양과 플랫폼에 따라 잘릴 수 있습니다.

경고 : 이미 Android 앱이있는 경우 Android 앱에서 웹 앱으로 아이콘을 복사하고 붙여 넣지 마십시오. 스케일이 다르므로 아이콘이 너무 작게 보입니다.

웹 응용 프로그램에 아이콘을 추가하십시오

아이콘을 만든 후에는 다른 아이콘 리소스와 유사한 웹 응용 프로그램에 항목을 추가 할 수 있습니다. Web Application Manifest는 JSON 파일의 웹 응용 프로그램에 대한 정보를 제공하며 "아이콘"배열이 포함되어 있습니다.

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

마스크 가능한 아이콘은 특별한 새로운 키 "목적"을 사용하여 아이콘 마스크와 함께 사용되도록 의도되어 있음을 나타냅니다. 투명한 배경이있는 아이콘의 기본 "목적"은 "Any"이며, 각 옵션은 공백으로 분리하여 아이콘에 여러 가지 용도를 사용 할 수 있습니다.

 <code>"purpose": "maskable any"</code>

아이콘을 미리 봅니다

마스크 가능한 아이콘이 어떻게 생겼는지보고 싶습니까? 아이콘이 다른 모양 아래에서 어떻게 보이는지 평가하는 데 도움이되는 도구 마스크 가능.app을 만들었습니다.

이 앱을 사용하면 Android 장치에서 찾을 수있는 다양한 모양의 아이콘을 미리 볼 수 있습니다. 이 도구가 프로그레시브 웹 애플리케이션을위한 고유 한 아이콘을 만드는 데 도움이되기를 바랍니다.

[응용 프로그램보기] [소스 코드보기]

결과에 만족하면 응용 프로그램 테스트를 시작할 수 있습니다. Firefox 미리보기 야간 및 크롬 카나리아는 모두 마스크 가능한 아이콘을 지원합니다. PWA가 어떻게 보이는지 확인할 수 있습니다.

pwacompat와 같은 도구는 마스크 가능한 아이콘도 지원합니다. 새로운 마스크 가능한 아이콘을 기반으로 iOS 및 기타 장치의 아이콘을 자동으로 생성 할 수 있습니다!

나만의 아이콘을 만들기 시작하십시오

안드로이드에 PWA 아이콘이 어떻게 나타나는지에 대한 더 많은 제어를 원한다면 마스크 가능한 아이콘이 최선의 선택입니다. 마스크 가능한 아이콘을 사용하면 아이콘의 가장자리 간 디스플레이를 사용자 정의 할 수 있습니다. 이 기사가 첫 번째 마스크 가능한 아이콘을 만들기 시작하는 데 도움이되기를 바랍니다.

아이콘 출처 :

• https://www.php.cn/link/258b55f3d6bc1cafb846ac3bbe5bc643
• https://www.php.cn/link/55a85e71b468ef171a7d4509b3f35f36
• https://www.php.cn/link/284c1ffedc349416c5a95b82a0f6a6d7
• https://www.php.cn/link/e5f6b927ce20f43fb7d5247109be554a
• https://www.php.cn/link/41be696537187bb3b209c20dafeb2a81

위 내용은 마스크 가능한 아이콘 : PWA의 안드로이드 적응 아이콘의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!