맞춤 스플래시 화면에 맞게 구성되지 않음

맞춤 스플래시 화면을 사용하면 프로그레시브 웹 앱 (PWA)이 해당 기기용으로 제작된 앱처럼 느껴집니다. 기본적으로 사용자가 홈 화면에서 PWA를 실행하면 Android는 PWA가 준비될 때까지 흰색 화면을 표시합니다. 사용자에게는 최대 200ms 동안 빈 흰색 화면이 표시될 수 있습니다. 맞춤 스플래시 화면을 설정하면 사용자에게 맞춤 배경 색상과 PWA 아이콘을 표시하여 브랜드에 맞는 매력적인 환경을 제공할 수 있습니다.

Lighthouse 스플래시 화면 감사 실패 이유

Lighthouse는 맞춤 스플래시 화면이 없는 페이지를 신고합니다.

사이트가 맞춤 스플래시 화면에 맞게 구성되지 않았음을 보여주는 Lighthouse 감사

맞춤 스플래시 화면을 만드는 방법

Android용 Chrome은 웹 앱 매니페스트에서 다음 요구사항을 충족하면 맞춤 스플래시 화면을 자동으로 표시합니다.

  • name 속성은 PWA의 이름으로 설정됩니다.
  • background_color 속성이 유효한 CSS 색상 값으로 설정됩니다.
  • theme_color 속성이 유효한 CSS 색상 값으로 설정됩니다.
  • icons 배열은 512x512픽셀 이상의 아이콘을 지정합니다.
  • 지정된 아이콘이 존재하며 PNG입니다.

자세한 내용은 Chrome 47의 설치된 웹 앱에 스플래시 화면 추가를 참고하세요.

자료

맞춤 스플래시 화면에 맞게 구성되지 않음 감사의 소스 코드