설치할 수 있게 되는 데 필요한 것은 무엇입니까?

Pete LePage

프로그레시브 웹 앱 (PWA)은 웹 기술을 사용하여 빌드된 최신 고품질 애플리케이션입니다. PWA는 iOS/Android/데스크톱 앱과 유사한 기능을 제공하고, 불안정한 네트워크 조건에서도 안정적이고, 설치가 가능하므로 사용자가 쉽게 찾아서 사용할 수 있습니다.

대부분의 사용자는 애플리케이션 설치 및 설치된 환경의 이점에 대해 잘 알고 있습니다. 설치된 애플리케이션은 Mac OS X의 애플리케이션 폴더, Windows의 시작 메뉴, Android 및 iOS의 홈 화면과 같은 운영체제 시작 영역에 표시됩니다. 설치된 애플리케이션은 활동 전환기, 기기 검색엔진(예: Spotlight), 콘텐츠 공유 시트에도 표시됩니다.

대부분의 브라우저는 프로그레시브 웹 앱 (PWA)이 특정 기준을 충족하는 경우 설치 가능함을 사용자에게 표시합니다. 표시기의 예로는 주소 표시줄의 설치 버튼 또는 더보기 메뉴의 설치 메뉴 항목이 있습니다.

설치 표시기가 표시된 검색주소창 스크린샷
브라우저 제공 설치 프로모션 (데스크톱)
브라우저 제공 설치 프로모션 스크린샷
브라우저 제공 설치 프로모션 (모바일)

또한 기준이 충족되면 많은 브라우저에서 beforeinstallprompt 이벤트를 실행하므로 앱 내에서 설치 흐름을 트리거하는 맞춤 인앱 UX를 제공할 수 있습니다.

설치 기준

Chrome에서 프로그레시브 웹 앱은 beforeinstallprompt 이벤트를 실행하고 브라우저 내 설치 프로모션을 표시하려면 먼저 다음 기준을 충족해야 합니다.

  • 웹 앱이 아직 설치되지 않았습니다.
  • 사용자 참여 휴리스틱을 충족합니다.
    • 사용자가 페이지를 한 번 이상 클릭하거나 탭했어야 합니다 (이전 페이지가 로드 중일 때 포함).
    • 사용자가 언제든지 페이지를 30초 이상 보는 데 머물러야 합니다.
  • HTTPS를 통해 제공
  • 다음을 포함하는 웹 앱 매니페스트를 포함합니다.
    • short_name 또는 name
    • icons - 192픽셀 및 512픽셀 아이콘을 포함해야 함
    • start_url
    • display - fullscreen, standalone, minimal-ui 중 하나여야 합니다.
    • prefer_related_applications 필드가 있거나 false이 아니어야 합니다.

다른 브라우저도 비슷한 설치 기준이 있지만 약간의 차이는 있을 수 있습니다. 자세한 내용은 각 사이트를 확인하세요.