사용자 지정 PWA 시작 화면 만들기

게시 됨: 2020-08-31

이전에 PWA 매니페스트 자습서에서 설명한 것처럼 manifest.json 내부에 몇 줄의 코드만으로 PWA에 대한 고유한 시작 화면을 만들 수 있습니다. 프로세스는 예상대로 지나치게 복잡하지 않으며 실제로 모든 작업을 순식간에 완료할 수 있습니다. 바로 들어가 보겠습니다.

PWA의 스플래시 화면 사례

구성되지 않은 경우 PWA를 여는 사용자는 기본적으로 빈 흰색 화면으로 맞이합니다. 최신 장치에서 앱을 여는 시간은 거의 즉각적이므로 이 자체로는 문제가 없습니다. 그러나 느린 기기에서는 앱에 대한 사용자의 초기 인식을 망치기 때문에 문제가 될 수 있습니다. 1GB RAM이 장착된 저사양 기기가 여전히 가장 일반적이라는 사실과 함께 브랜드를 대표하는 고유한 시작 화면은 필수입니다.

나만의 스플래시 화면을 만드는 방법

Android에서 프로세스는 세 줄의 코드를 입력하는 것만큼 빠릅니다. 그러나 iOS의 경우 다른 화면 크기에 대해 다른 스플래시 이미지 크기를 만들어야 하므로 이야기가 다릅니다.

안드로이드용

수동으로 하기

manifest.json 파일에서 name , background_color 및 icons 의 세 가지 속성이 올바르게 구성되었는지 확인합니다.

name : PWA의 이름
background_color : 시작 화면의 배경색입니다. 유효한 CSS 색상 값만 인식됩니다.
icons : 최소 크기가 192×192픽셀인 .png 아이콘입니다.

예를 들어 적절하게 구성된 manifest.json 은 다음과 같습니다. icons 속성에 네 가지 크기가 있다는 점에 유의하세요. 이러한 크기가 다른 아이콘은 다양한 장치에 대한 최상의 호환성을 제공하기 위해 제공됩니다.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "디스플레이": "전체 화면",
    "범위": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "설명": "Magento를 위한 차세대 전자 상거래 솔루션",
    "아이콘": [
        {
            "src": "/icon-192x192.png",
            "크기": "192x",
            "유형": "이미지/png"
        },
        {
            "src": "/icon-256x256.png",
            "크기": "256x",
            "유형": "이미지/png"
        },
        {
            "src": "/icon-384x384.png",
            "크기": "384x",
            "유형": "이미지/png"
        },
        {
            "src": "/icon-512x512.png",
            "크기": "512x",
            "유형": "이미지/png"
        }
    ]
}

속성(및 manifest.json 파일) 설정을 마치면 PWA(일반적으로 Chrome)를 지원하는 브라우저가 자동으로 시작 화면에 대해 다른 아이콘 크기를 생성하고 그에 따라 표시합니다.

꽤 어렵지 않죠? 당신이 우리에게 묻는다면, 우리는 이것이 개발 경험이 이런 느낌이어야 한다고 생각합니다.

 추천 자료: PWA 매니페스트: 쉬운 방법으로 웹 앱 매니페스트 만들기

매니페스트 생성기 사용

매니페스트 생성기 를 사용하여 이 프로세스를 손쉽게 자동화할 수 있습니다. 필요한 정보를 입력하기만 하면 생성기가 필요한 모든 정보를 포함하는 .zip 을 생성합니다.

iOS용

Apple은 분명히 이 프로세스를 개발자에게 쉽게 만들고 싶지 않습니다. 이 글을 쓰는 시점에서 Web App Manifest 지원 상태는 여전히 부분적으로 지원됨으로 나열되어 있습니다. 이것은 PWA가 icons , Minimal minimal-ui , fullscreen , theme-color 및 orientation 을 지원하지 않는다는 것을 의미합니다.

다행히도 <apple-touch-startup-image> 메타 태그를 사용하는 방법이 있습니다. 이상적인 솔루션은 아니지만 작동합니다.

 <!-- iPhone X용 스플래시 화면(1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(장치 너비: 375px) 및 (장치 높이: 812px) 및 (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">

<apple-touch-startup-image> 메타 태그를 사용하여 PWA의 시작 화면(예: startup-image )에 대한 고정 해상도 이미지를 지정할 수 있습니다. 이 사용자 지정 시작 화면은 하나 의 화면 크기와만 호환되며 시장에 나와 있는 Apple 제품의 다양한 화면 크기를 수용하려면 훨씬 더 다양한 이미지 크기가 필요합니다.

시중에 나와 있는 다양한 Apple 화면 크기 — 시장에 나와 있는 다양한 Apple 화면 크기 [출처: 휴먼 인터페이스 지침]

이것이 의미하는 바는 각 화면 크기에 대해 각 방향(가로 및 세로)에 대해 하나씩 두 개의 시작 화면을 만들어야 한다는 것입니다. 목록에 있는 장치 중 일부 를 포함했을 때 코드가 다음과 같이 표시되어야 합니다.

 <!-- 아이폰 X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(장치 너비: 375px) 및 (장치 높이: 812px) 및 (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">
<!-- 아이폰 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">
<!-- 아이폰 8 플러스, 7 플러스, 6s 플러스, 6 플러스 (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(장치 너비: 414px) 및 (장치 높이: 736px) 및 (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png">
<!-- 아이폰 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(장치 너비: 320px) 및 (장치 높이: 568px) 및 (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png">
<!-- 아이패드 미니, 에어(1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) 및 (device-height: 1024px) 및 (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1536x2048.png">
<!-- 아이패드 프로 10.5"(1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(장치 너비: 834px) 및 (장치 높이: 1112px) 및 (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png">
<!-- 아이패드 프로 12.9"(2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(장치 너비: 1024px) 및 (장치 높이: 1366px) 및 (-webkit-device-pixel-ratio: 2)" href="/apple -launch-2048x2732.png">

index.html 의 <head> 에 이 코드를 연결하고 PWA 동작을 활성화하기 위해 아래에 <meta> 태그를 삽입하는 것을 잊지 마십시오. 그렇지 않으면 시작 화면이 전혀 작동하지 않습니다.

 <메타 이름="apple-mobile-web-app-capable" content="예">

이것으로 모든 준비가 완료되어야 합니다. iOS PWA를 실행하면 시작 화면을 볼 수 있습니다.

iOS 시작 화면 생성기 사용

물론 iOS 스플래시 화면 생성기를 사용하여 이 프로세스를 자동화하는 더 좋은 방법이 있습니다. 이미지를 소스로 사용하여 생성기는 index.html 에 삽입해야 하는 HTML 코드와 함께 다양한 크기의 이미지를 생성합니다.

결론

온보딩 경험의 일부는 아니지만 스플래시 화면은 브랜드에 대한 긍정적인 인식을 형성하는 데 여전히 중요한 역할을 합니다.

이 튜토리얼이 정확한 문제를 해결하기를 바랍니다. 귀하와 귀하의 팀이 PWA에 대한 경험이 많지 않은 경우 PWA 구현 및 사용자 지정이 골칫거리가 될 수 있습니다. SimiCart와 같은 전문 PWA 개발 솔루션을 사용하면 훨씬 쉽게 만들 수 있습니다.