더욱 다양해진 PWA 설치 UI

소개

휴대기기와 기기 공급업체 앱 스토어의 도입으로 인해 정신 모델 소프트웨어 검색, 평가 및 설치 방법을 배웠습니다. 이제 사용자는 앱 스토어에 매우 익숙하며 앱에 관한 컨텍스트 등 앱 스토어를 통해 제공되는 추가 정보 소셜 피드백, 평점 등 데스크톱 운영체제에서 새로 등장한 앱 스토어 운영 체제를 구축합니다.

오늘날의 설치 환경에서의 과제

현재 사용자가 PWA를 설치하려고 하면 정보 표시줄 및 모달 오버레이가 최소한의 확인할 수 있습니다 계속 설치하면 프로세스가 너무 빨리 종료되어 제공합니다 이는 앱 설치에 대한 고객의 기대에 어긋나며 사용자가 앱을 설치하지 다소 혼란스러워할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> PWA 설치 UI의 예
PWA 설치 UI의 예

개발자가 네이티브 환경과 동일한 수준의 설치 환경을 제공할 수 있도록 지원합니다. Chrome에서 새롭게 선보이는 '더 풍부한 설치'를 통해 개발자는 설명 및 스크린샷을 매니페스트 파일에 추가하고 하단 시트 대화상자에 표시 를 사용해 보세요.

<ph type="x-smartling-placeholder">
</ph> Chrome 하단 시트 UI 예
Chrome 하단 시트 UI의 예

이를 통해 개발자는 더 매력적인 설치 프로세스를 만들 수 있습니다. 사용자의 기대에 더 잘 부합하며 기존의 멘탈 모델을 모방 사용자 환경을 개선할 수 있습니다

<ph type="x-smartling-placeholder">
</ph> 더욱 다양해진 설치 UI가 확장되었습니다.
더 풍부해진 설치 UI 확장.
<ph type="x-smartling-placeholder">
</ph> 더욱 풍부한 설치 UI가 축소되었습니다.
더 풍부해진 설치 UI가 축소됨

이전 버전과의 호환성

매니페스트 파일에 하나 이상의 스크린샷이 포함되지 않은 웹사이트는 계속해서 변경할 수 있습니다 이 내용은 개발자 커뮤니티의 활용에 따라 향후 변경될 수 있습니다. 및 사용자의 반응입니다.

UI 미리보기

이 UI는 Android의 Chrome 94, 데스크톱의 Chrome 108부터 작동합니다.

이 기능은 squoosh.app에서 사용 설정되어 있으며, 미리 볼 수 있습니다.

구현

더 풍부한 설치 UI 대화상자를 표시하려면 개발자는 상응하는 폼 팩터의 스크린샷을 screenshots 배열에 하나 이상 추가해야 합니다. description 필드는 필수는 아니지만 사용하는 것이 좋습니다. 콘텐츠 대화상자는 앱 스토어 설치와 유사한 환경을 만들기 위해 screenshotsdescription 필드의 콘텐츠를 사용하여 빌드됩니다. 이 UI를 통해 사용자는 기기에 앱을 추가하고 있음을 식별할 수 있으며, 사용 가능한 공간이 더 많아지면 개발자는 설치 시 사용자에게 특정 컨텍스트를 제공할 수 있습니다.

예를 들어 개발자는 description 필드를 사용하여 사용자가 기기에 앱을 계속 사용하도록 유도하는 앱의 기능을 강조할 수 있으며, screenshots를 사용하면 플랫폼 앱이 쉽게 액세스할 수 있는 웹 앱의 디자인과 분위기를 독립형으로 표시할 수 있습니다.

자세한 사양과 이를 앱에 추가하기 위한 가이드는 더 풍부한 설치 UI 패턴을 참고하세요.

의견

향후 카테고리 및 앱 평점과 같은 다른 데이터를 추가하는 것을 고려할 예정이지만 이는 개발자와 사용자의 의견을 바탕으로 해야 합니다

앞으로 몇 달간 개발자들이 이 새로운 UI 패턴을 어떻게 살펴보는지 확인하고자 합니다. 님이 의견을 받고자 합니다. 이 양식을 작성하여 Google에 문의하세요.