프로그레시브 웹 앱은 Chrome 주소 표시줄 (검색주소창)의 새로운 설치 버튼으로 쉽게 설치할 수 있습니다.
데스크톱에서는 일반적으로 사용자에게 프로그레시브 웹 앱을 설치할 수 있다는 표시가 없으며, 설치된 경우 설치 흐름이 점 3개로 된 메뉴 내에 숨겨집니다.
Chrome 76 (2019년 6월 중순 베타)에서는 주소 표시줄 (검색주소창)에 설치 버튼을 추가하여 사용자가 데스크톱에 프로그레시브 웹 앱을 더 쉽게 설치할 수 있도록 할 예정입니다. 사이트가 프로그레시브 웹 앱 설치 기준을 충족하면 Chrome에서 주소 표시줄에 자동으로 설치 아이콘을 표시합니다. 버튼을 클릭하면 사용자에게 PWA를 설치하라는 메시지가 표시됩니다.
다른 설치 이벤트와 마찬가지로 appinstalled 이벤트를 수신 대기하여 사용자가 PWA를 설치했는지 감지할 수 있습니다.
자체 설치 메시지 추가
사용자가 앱을 설치하는 데 유용한 사용 사례가 PWA에 있는 경우(예: 앱을 주 1회 이상 사용하는 사용자가 있는 경우) 앱의 웹 UI 내에서 PWA 설치를 홍보해야 합니다.
자체 맞춤 설치 버튼을 추가하려면 beforeinstallprompt 이벤트를
수신 대기합니다. 프로그레시브 웹 앱이 실행되면 이벤트에 대한 참조를 저장하고 사용자 인터페이스를 업데이트하여 프로그레시브 웹 앱을 설치할 수 있음을 사용자에게 알립니다.
PWA 설치 승격 패턴
PWA 설치를 장려할 수 있는 주요 방법에는 세 가지가 있습니다.
- 자동 브라우저 프로모션(예: 주소 표시줄 설치 버튼)
- 배너, 헤더 또는 탐색 메뉴의 버튼 등 UI 요소가 애플리케이션 인터페이스에 표시되는 애플리케이션 UI 프로모션
- 인라인 프로모션 패턴은 사이트 콘텐츠 내의 프로모션을 포괄합니다.
자세한 내용은 PWA 설치 승격 (모바일) 패턴을 참고하세요. 모바일에 중점을 두지만 대다수의 패턴은 데스크톱에 적용하거나 데스크톱 환경에서 작동하도록 쉽게 수정할 수 있습니다.