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 및 데스크톱에서 어떻게 작동하는지 이해할 수 있습니다. 이러한 불확실성을 해결하는 가장 좋은 방법은 우선순위에 따라 항목을 정렬하는 것입니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.다음 코드 샘플에서는 Android의 Chrome이나 Edge 또는 Chrome의 데스크톱에 앱을 설치할 때 시도할 수 있는 다양한 앱 바로가기를 정의합니다.
iOS 및 iPadOS
PWA를 게시할 때 iOS/iPadOS에서 Safari 사용자의 환경을 개선할 수 있는 몇 가지 개선사항이 있습니다.
스플래시 화면
웹 앱 매니페스트 장에서 본 것처럼, Android는 매니페스트의 값에 따라 자동으로 스플래시 화면을 생성합니다. iOS와 iPadOS는 그렇지 않습니다. 이러한 기기에서는 <link> 요소를 사용하여 HTML의 스플래시 화면을 정적 이미지로 정의해야 합니다.
이러한 이미지를 Apple 기기에서 시작 이미지라고 하며 다음과 같이 apple-touch-startup-image 값과 함께 rel 속성을 사용합니다.
<link rel="apple-touch-startup-image" href="ios-startup.png">
문제는 시작 이미지가 PWA를 열 때 표시되는 창 크기와 정확히 일치해야 한다는 것입니다. 따라서 iOS 및 iPadOS 기기마다 다른 이미지가 필요합니다. iPad에서 가로/세로 모드로 열고 PWA를 멀티태스킹 모드 (예: 화면의 1/3, 1/2 또는 2/3)로 렌더링하는 등 더 많은 상황을 처리해야 합니다.
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에서 매니페스트를 제시간에 로드할 수 없는 경우 '홈 화면에 추가'를 누릅니다. 홈 화면에 아이콘을 배치하지만 앱 환경은 제공하지 않는 경우 단지 Safari 탭에 대한 바로 가기일 뿐입니다.