점진적 웹 앱에 맞춤 iOS 시작 화면 추가하기

프로그레시브 웹 앱을 iOS 기기처럼 기본으로 만들기 위해 사용자가 앱을 시작할 때 표시되는 맞춤 시작 화면을 추가 할 수 있습니다. 이것은 오랫동안 애플의 사파리 웹 컨텐츠 가이드 (Safari Web Content Guide) 에 문서화 된 기능 이지만 구현 된 것보다 더 도전적으로 보였다. 사실 iOS 11.0까지는 전혀 작동하지 않는 것으로 보입니다.

사용자 지정 시작 화면을 추가하려면 설명서에서 다음 코드를 제안합니다.

<link rel = "apple-touch-startup-image"href = "/ launch.png">

언급되지 않은 것은 href속성이 앱을 사용하는 iOS 기기와 정확히 동일한 해상도의 이미지를 참조해야한다는 것입니다. 여기서 발생하는 문제는 해상도가 다른 여러 개의 iOS 기기가 있다는 것입니다. 불행히도 크기가 다른 이미지의 경우이 코드를 여러 번 반복하면 안됩니다. 대신,이 media속성 을 사용하여 어떤 시작 이미지가 어떤 장치를위한 것인지 지정해야합니다.

head다른 iOS 장치에 대한 사용자 지정 시작 화면을 지원하려면 PWA 섹션에 다음 코드를 추가하십시오 .

<! - 아이폰 X (X 1125px 2436px) -> <링크 REL = "사과 터치 시작 이미지"미디어 = "(소자 폭 : 375px) 및 (장치 신장 812px) 및 (-webkit- device-pixel-ratio : 3) "href ="/ apple-launch-1125x2436.png ">

<! - iPhone 8, 7, 6s, 6 (750px x 1334px) -> <link rel = "apple-touch-startup-image"media = "(장치 너비 : 375px) 및 (장치 높이 : 667px) ) 및 (-webkit-device-pixel-ratio : 2) "href ="/ apple-launch-750x1334.png ">

<! - iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -> <link rel = "apple-touch-startup-image"media = "(장치 너비 : 414px) 및 (장치 -height : 736px) 및 (-webkit-device-pixel-ratio : 3) "href ="/ apple-launch-1242x2208.png ">

<! - iPhone 5 (640px x 1136px) -> <link rel = "apple-touch-startup-image"media = "(device-width : 320px) 및 (device-height : 568px) 및 (-webkit- device-pixel-ratio : 2) "href ="/ apple-launch-640x1136.png ">

<! - apple-touch-startup-image "media ="(device-width : 768px) 및 (device-height : 1024px) 및 (- webkit-device-pixel-ratio : 2) "href ="/ apple-launch-1536x2048.png ">

apple-touch-startup-image "media ="(장치 너비 : 834px) 및 (장치 높이 : 1112px) 및 (- 너비 : 1112px) <- iPad Pro 10.5 "(1668px x 2224px) webkit-device-pixel-ratio : 2) "href ="/ apple-launch-1668x2224.png ">

<! - apple touch-startup-image "media ="(device-width : 1024px) 및 (device-height : 1366px) 및 (- webkit-device-pixel-ratio : 2) "href ="/ apple-launch-2048x2732.png ">

맞춤 시작 화면을 만들려면 앱이 모바일 웹 앱 이어야하며 다음 메타 태그를 사용하여 구현할 수 있어야합니다.

<meta name = "apple-mobile-web-app-capable"content = "yes">

출처 : https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3