PWA의 전환 및 사용을 개선할 수 있는 여러 개선사항이 있습니다.
앱 바로가기
앱 바로가기는 PWA의 딥 링크가 포함된 정적 목록으로 매니페스트에 작성됩니다. 웹 앱 매니페스트 사양: PWA의 여러 부분 또는 기능에 대한 바로가기 목록을 정의할 수 있으며, 자주 액세스하는 섹션으로의 탐색을 가속화합니다.
앱 바로가기는 대부분의 데스크톱 운영체제와 WebAPK가 설치된 Android에서 사용할 수 있으며 다음 이미지와 같이 홈 화면, 도크 또는 작업 표시줄의 앱 아이콘에 있는 상황에 맞는 메뉴에 표시됩니다.
이 메뉴에 액세스하려면 사용자는 PWA 아이콘을 마우스 오른쪽 버튼으로 클릭하거나 길게 눌러야 합니다.
바로가기는 매니페스트의 shortcuts 구성원에 정의되어 있습니다. 다음 속성을 갖는 구성원 배열을 사용합니다.
name- 일반적으로 컨텍스트 메뉴에 표시되는 사용자에게 표시할 텍스트입니다.
url- 사용자가 이 바로가기에서 PWA를 시작할 때 로드해야 하는 URL입니다. PWA 범위 내의 URL이어야 하며
name또는short_name에서 설명하는 기능으로 딥 링크되어야 합니다. short_name- (선택사항)
name필드의 전체 값을 표시할 공간이 충분하지 않을 때 사용되는 더 짧은 이름입니다. description- (선택사항) 이 바로가기가 실행할 작업에 대한 설명
icons- (선택사항) 바로가기를 나타내는 이미지를 설명하는
src,type,sizes, 선택적purpose필드가 있는 아이콘 객체의 배열
앱 바로가기는 최선의 기능으로 취급해야 합니다. 즉, 이러한 바로가기에 의존하여 일관되게 표시할 수는 없으며, 바로가기가 표시되더라도 얼마나 많은 바로가기가 표시될지 또는 플랫폼에서 브라우저의 재량에 따라 아이콘을 무시하는지 알 수 없습니다. 플랫폼별로 전체를 논의하는 것은 이 범위에 해당하지 않지만 아래에서 Android 및 데스크톱에서 작동하는 방식을 간략히 살펴보세요. 이러한 불확실성을 해결하는 가장 좋은 방법은 우선순위에 따라 항목을 정렬하는 것입니다.
다음 코드 샘플은 Android에 Chrome을 사용하여 앱을 설치하거나 데스크톱에 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에서 더 많은 상황을 처리해야 합니다.
업데이트된 iOS 및 iPadOS 화면 크기 목록은 Apple 인간 인터페이스 가이드라인에서 확인할 수 있습니다.
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의 디스플레이 모드로 지원됩니다.
다음 이미지에서 왼쪽은 테마 색상이 있는 기본 독립형 디자인이고 오른쪽은 상태 표시줄 뒤에 콘텐츠를 렌더링할 수 있는 전체 화면 iOS 모드가 있는 PWA입니다.
HTML에 다음 태그를 추가하면 iOS 및 iPadOS의 PWA가 전체 화면 모드로 전환되지만 Android와는 다릅니다.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
이 모드에서는 기기의 상태 표시줄(시계, 배터리 수준, 알림 아이콘이 표시되는 상단)이 계속 표시되지만 콘텐츠 위에 투명한 배경으로 렌더링됩니다.
이 모드를 사용할 때는 운영체제에서 항상 아이콘을 흰색으로 렌더링하므로 디자인에 주의해야 합니다. 따라서 화면 상단의 배경은 항상 밝은 콘텐츠와 대비되도록 해야 합니다. 또한 앱 디자인 챕터에 설명된 대로 CSS 환경 변수를 사용하여 안전 영역에서 콘텐츠를 렌더링하는 것이 중요합니다.
설치 안정성
15.4 이전의 iOS 및 iPadOS에서 매니페스트 파일은 사용자가 브라우저에서 공유 아이콘을 사용하여 공유 시트를 열 때만 네트워크에서 로드되고 페이지가 로드될 때는 로드되지 않습니다. 따라서 브라우저는 그때까지 웹사이트가 PWA인지 확인하지 않으므로 매니페스트를 로드할 수 없거나 시간이 너무 오래 걸려 브라우저에서 무시하는 상황이 발생할 수 있습니다.
브라우저가 매니페스트를 제때 로드할 수 없는 경우 '홈 화면에 추가'를 누르면 홈 화면에 아이콘이 표시되지만 앱 환경은 제공되지 않습니다. 브라우저 탭의 바로가기일 뿐입니다.