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 버전 1개 이상을
<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인지 확인하지 않으므로 매니페스트를 로드할 수 없거나 시간이 너무 오래 걸려 브라우저에서 무시하는 상황이 발생할 수 있습니다.
브라우저가 매니페스트를 제때 로드할 수 없는 경우 '홈 화면에 추가'를 누르면 홈 화면에 아이콘이 표시되지만 앱 환경은 제공되지 않습니다. 브라우저 탭의 바로가기일 뿐입니다.