PWA의 전환 및 사용을 개선할 수 있는 여러 가지 개선사항이 있습니다.
앱 바로가기
앱 바로가기는 PWA로 연결되는 정적인 딥 링크 목록으로, 매니페스트에 작성됩니다. 웹 앱 매니페스트 사양. PWA의 여러 부분이나 기능에 대한 바로가기 목록을 정의할 수 있으며, 자주 액세스하는 섹션으로의 탐색 속도를 높여줍니다.
앱 바로가기는 대부분의 데스크톱 운영체제 및 WebAPK가 포함된 Android에서 사용할 수 있으며, 다음 이미지와 같이 홈 화면, 도크 또는 작업 표시줄에 있는 앱 아이콘의 컨텍스트 메뉴에 표시됩니다.
이 메뉴에 액세스하려면 사용자가 PWA 아이콘을 마우스 오른쪽 버튼으로 클릭하거나 길게 눌러야 합니다.
바로가기는 매니페스트의 shortcuts 멤버에 정의됩니다. 다음과 같은 속성이 있는 멤버 배열을 받습니다.
name- 일반적으로 컨텍스트 메뉴에서 사용자에게 표시되는 텍스트입니다.
url- 사용자가 이 바로가기에서 PWA를 시작할 때 PWA가 로드되어야 하는 URL입니다. PWA 범위 내의 URL이어야 하며
name또는short_name에서 설명하는 기능으로 연결되는 딥 링크여야 합니다. short_name- (선택사항)
name필드의 전체 값을 표시할 공간이 충분하지 않을 때 사용되는 짧은 이름입니다. description- (선택사항) 이 단축키의 기능에 대한 설명
icons- (선택사항) 바로가기를 나타내는 이미지를 설명하는
src,type,sizes및 선택적purpose필드가 있는 아이콘 객체의 배열
앱 바로가기를 최선의 노력으로 취급해야 합니다. 즉, 이러한 바로 가기가 일관되게 나타나도록 의존할 수 없으며, 바로 가기가 나타나더라도 플랫폼에서 브라우저의 재량에 따라 아이콘을 무시하는지 또는 얼마나 많은 바로 가기가 나타날지 알 수 없습니다. 플랫폼별 전체 설명은 범위를 벗어나지만 아래에서는 Android와 데스크톱에서 작동하는 방식에 대한 개념을 설명합니다. 이러한 불확실성을 처리하는 가장 좋은 방법은 우선순위에 따라 항목을 정렬하는 것입니다.
다음 코드 샘플은 Chrome이 설치된 Android나 Edge 또는 Chrome이 설치된 데스크톱에 앱을 설치할 때 시도할 수 있는 다양한 앱 바로가기를 정의합니다.
iOS 및 iPadOS
PWA를 게시할 때 iOS/iPadOS의 Safari 사용자 환경을 개선할 수 있는 몇 가지 개선 사항이 있습니다.
스플래시 화면
웹 앱 매니페스트 챕터에서 볼 수 있듯이 Android는 매니페스트 값에 따라 자동으로 스플래시 화면을 만듭니다. iOS와 iPadOS는 그렇지 않습니다. 이러한 기기에서는 HTML의 스플래시 화면을 <link> 요소를 사용하여 정적 이미지로 정의해야 합니다.
이러한 이미지를 Apple 기기에서는 시작 이미지라고 하며 다음과 같이 apple-touch-startup-image 값과 함께 rel 속성을 사용합니다.
<link rel="apple-touch-startup-image" href="ios-startup.png">
문제는 시작 이미지의 창 크기가 PWA가 열릴 때 보이는 것과 정확히 일치해야 한다는 점입니다. 따라서 iOS 및 iPadOS 기기마다 다른 이미지가 필요합니다. 가로 모드/세로 모드로 열거나 멀티태스킹 모드 (예: 화면의 1/3, 1/2 또는 2/3)로 PWA를 렌더링하는 등 iPad에서 더 많은 상황을 처리해야 합니다.
Apple 휴먼 인터페이스 가이드라인에서 업데이트된 iOS 및 iPadOS 화면 크기 목록을 확인할 수 있습니다.
시작 이미지의 서로 다른 버전은 media 속성 내에 미디어 쿼리로 설정할 수 있습니다.
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
iOS 시작 이미지의 디자인 패턴
시작 이미지를 정의하는 것은 어려운 일이므로 자동화된 생성 및 구성을 위한 몇 가지 도구가 있습니다.
- 정적 생성은 빌드 시스템과 통합되어, PNG 정적 이미지를 모두 생성하고, 문서에 삽입할
<link>요소가 포함된 HTML 코드를 제공합니다. PWA 애셋 생성기가 이러한 도구의 예입니다. - 클라이언트 측 생성기, 현재 기기 유형과 화면 크기에 따라 하나 이상의 base64 시작 이미지를
<link>삽입 요소에 삽입할 수 있는 JavaScript 도구입니다. 메모리 내 캔버스를 사용하여 이미지를 렌더링하고 PNG 파일이 있는data:URI로 변환할 수 있습니다. PWA Compat 라이브러리는 Android의 일반적인 시작 화면을 클론하여 이 작업을 실행하는 사용하기 쉬운 클라이언트 측 라이브러리입니다.
Apple 모바일 플랫폼에서 PWA 감지
PWA에서는 점진적 개선 및 기능 감지를 사용해야 하지만, 설치 안내를 제공하거나 iOS 전용 플랫폼별 앱의 링크를 추가하려는 경우와 같이 사용자가 Apple 모바일 플랫폼에서 PWA에 있는지 알아야 하는 극단적인 사례가 있을 수 있습니다.
사용자 에이전트 문자열을 읽지 않으려면 navigator 객체의 standalone 속성을 확인합니다. 이는 비표준 속성이며 iOS 및 iPadOS의 WebKit 엔진에서만 사용할 수 있습니다.
navigator.standalone가undefined이면 사용자가 iPadOS 또는 iOS 기기를 사용하고 있지 않다는 의미입니다.navigator.standalone가false이면 사용자가 브라우저에서 PWA를 열고 사용 중이라는 의미입니다.navigator.standalone이true이면 사용자가 홈 화면에서 PWA를 열었고 독립형 PWA 환경을 사용하고 있다는 의미입니다.
전체 화면 지원
iOS 및 iPad의 Safari에서는 display: standalone만 PWA 아이콘의 표시 모드로 지원됩니다. display: fullscreen는 Android 기기에서 지원되지 않지만 비표준 메타 태그를 사용하여 PWA를 전체 화면 모드로 전환할 수 있습니다.
다음 이미지에서는 테마 색상이 적용된 기본 독립형 디자인이, 오른쪽에는 상태 표시줄 뒤에 콘텐츠를 렌더링할 수 있는 전체 화면 iOS 모드가 있는 PWA가 나와 있습니다.
HTML에 다음 태그를 추가하면 iOS 및 iPadOS의 PWA가 전체 화면 모드로 전환되지만 Android와는 다릅니다.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
이 모드에서 기기의 상태 표시줄 (시계, 배터리 수준 및 알림 아이콘이 표시되는 상단)은 계속 표시되지만 투명한 배경과 함께 콘텐츠 위에 렌더링됩니다.
이 모드를 사용할 때는 운영 체제에서 아이콘을 항상 흰색으로 렌더링하므로 디자인에 주의해야 합니다. 따라서 화면 상단의 배경과 밝은 콘텐츠를 항상 대비해야 합니다. 또한 앱 디자인 챕터에 설명된 대로 CSS 환경 변수를 사용하여 안전 영역에서 콘텐츠를 렌더링하는 것이 중요합니다.
설치 안정성
iOS 및 iPadOS 15.4 이전의 Safari에서는 사용자가 브라우저 내의 공유 아이콘을 사용하여 공유 시트를 열 때에만 네트워크에서 매니페스트 파일을 로드하고, 페이지가 로드될 때는 로드되지 않습니다. 따라서 Safari는 해당 시점까지 웹사이트가 PWA인지 확인하지 않으며, 이로 인해 매니페스트를 로드할 수 없거나 시간이 너무 오래 걸리는 상황이 발생하여 Safari에서 이를 무시합니다.
Safari가 매니페스트를 제때 로드할 수 없을 때 'Add to Home Screen(홈 화면에 추가)'을 누르면 홈 화면에 아이콘이 표시되지만 앱 환경은 제공되지 않습니다. 단지 Safari 탭의 바로 가기일 뿐입니다.