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