사용자가 PWA를 설치하면 다음이 수행됩니다.
- 런처, 홈 화면, 시작 메뉴, 런치패드에 아이콘이 있어야 합니다.
- 사용자가 기기에서 앱을 검색할 때 결과로 표시됩니다.
- 운영체제 내에 별도의 창이 있어야 합니다.
- 특정 기능을 지원합니다.
설치 기준
모든 브라우저에는 웹사이트나 웹 앱이 프로그레시브 웹 앱인지, 독립형 환경을 위해 설치할 수 있는지를 표시하는 기준이 있습니다. PWA의 메타데이터는 웹 앱 매니페스트라고 하는 JSON 기반 파일에 의해 설정됩니다. 이에 대해서는 다음 모듈에서 자세히 다룹니다.
설치 가능성을 위한 최소 요구사항으로, 이를 지원하는 대부분의 브라우저는 웹 앱 매니페스트 파일과 특정 속성(예: 앱 이름, 설치된 환경의 구성)을 사용합니다. 단, macOS용 Safari는 예외적으로 설치 기능을 지원하지 않습니다.
설치를 허용하기 위한 요구사항은 브라우저마다 다릅니다. 이 도움말에서는 Chrome 기준을 자세히 설명하고 다른 브라우저의 요구사항 링크를 포함하고 있습니다.
PWA가 설치 가능 요건을 충족하는지 확인하는 데 몇 초 정도 걸릴 수 있으므로 URL 응답이 수신되자마자 설치 가능 여부 자체를 사용하지 못할 수도 있습니다.
데스크톱 설치
데스크톱 PWA 설치는 현재 Linux, Windows, macOS, Chromebook의 Chrome 및 Microsoft Edge에서 지원됩니다. 이러한 브라우저에서는 URL 표시줄에 (아래 이미지 참고) 현재 사이트를 설치할 수 있음을 알리는 설치 배지 (아이콘)가 표시됩니다.
사용자가 사이트에 참여하면 아래와 같이 앱을 앱으로 설치하도록 초대하는 팝업이 표시될 수 있습니다.
브라우저의 드롭다운 메뉴에 '
데스크톱 운영체제에서는 독립형 및 최소 UI 디스플레이 모드만 지원됩니다.
데스크톱에 설치된 PWA:
- Windows PC의 시작 메뉴 또는 시작 화면, Linux GUI의 도크 또는 바탕화면, macOS 런치패드 또는 Chromebook의 앱 런처에 아이콘이 있어야 합니다.
- 앱이 활성 상태이거나, 최근에 사용되었거나, 백그라운드에서 실행 중일 때 앱 전환기 및 도크에 아이콘이 있어야 합니다.
- Windows에서 검색하거나 macOS에서 Spotlight로 검색하는 등 앱 검색에 표시됩니다.
- 아이콘에 배지 번호를 설정하여 새 알림을 나타낼 수 있습니다. Badging API를 사용하면 됩니다.
- 앱 바로가기로 아이콘의 컨텍스트 메뉴를 설정할 수 있습니다.
- 동일한 브라우저로 두 번 설치할 수 없습니다.
데스크톱에 앱을 설치한 후 사용자는 about:apps로 이동하여 PWA를 마우스 오른쪽 버튼으로 클릭한 다음 '로그인 시 앱 시작'을 선택할 수 있습니다. 앱 시작 시 앱이 자동으로 열리도록 할 수 있습니다.
iOS 및 iPadOS 설치
iOS 및 iPadOS에 PWA를 설치하라는 브라우저 메시지가 없습니다. 이러한 플랫폼에서 PWA는 홈 화면 웹 앱이라고도 합니다. 이러한 앱은 Safari에서만 사용할 수 있는 메뉴를 통해 홈 화면에 수동으로 추가해야 합니다. HTML에 apple-touch-icon 태그를 추가하는 것이 좋습니다.
아이콘을 정의하려면 다음과 같이 HTML <head> 섹션에 아이콘 경로를 포함합니다.
<link rel="apple-touch-icon" href="/icons/ios.png">
Safari는 이 정보를 사용하여 바로 가기를 만듭니다. Apple 기기에 대해 특정 아이콘을 제공하지 않는 경우 사용자가 홈 화면의 아이콘은 사용자가 PWA를 설치했을 때의 스크린샷이 됩니다.
PWA 설치는 사용자가 Safari에서 웹사이트를 탐색하는 경우에만 사용할 수 있다는 점을 알아야 합니다. App Store에서 제공되는 다른 브라우저(예: Chrome, Firefox, Opera, Microsoft Edge)에서는 홈 화면에 PWA를 설치할 수 없습니다.
홈 화면에 앱을 추가하는 단계는 다음과 같습니다.
- 브라우저 하단 또는 상단에 있는 공유 메뉴를 엽니다.
- Add to Home Screen(홈 화면에 추가)을 클릭합니다.
- 앱 이름을 확인합니다. 사용자가 수정할 수 있습니다
- 추가를 클릭합니다. iOS 및 iPadOS에서 웹사이트와 PWA에 대한 북마크는 홈 화면에서 동일하게 표시됩니다.
iOS 및 iPadOS에서는 독립형 디스플레이 모드만 지원됩니다. 따라서 최소 UI 모드를 사용하면 브라우저 단축키로 대체됩니다. 전체 화면을 사용하는 경우 독립형으로 대체됩니다.
iOS 및 iPadOS에 설치된 PWA:
- 홈 화면, Spotlight 검색, Siri 추천, 앱 라이브러리 검색에 표시됩니다.
- 앱 갤러리의 카테고리 폴더에 표시되지 않습니다.
- 배지 설정 및 앱 바로가기와 같은 기능이 지원되지 않습니다.
또한 Safari는 웹 클립이라는 기본 기술을 사용하여 운영체제에서 PWA 아이콘을 생성합니다. 이러한 파일은 파일 시스템에 저장된 Apple의 속성 목록 형식의 XML 파일입니다.
Android 설치
Android에서 PWA 설치 메시지는 기기 및 브라우저에 따라 다릅니다. 사용자에게 표시될 수 있는 내용은 다음과 같습니다.
- 설치 또는 홈 화면에 추가 등 설치를 위한 메뉴 항목의 표현이 다릅니다.
- 자세한 설치 대화상자.
다음 이미지에서는 간단한 미니 정보 표시줄 (왼쪽)과 세부 설치 대화상자 (오른쪽)라는 두 가지 다른 버전의 설치 대화상자를 볼 수 있습니다.
PWA는 기기 및 브라우저에 따라 WebAPK, 바로가기 또는 QuickApp으로 설치됩니다.
WebAPKs
WebAPK는 일반적으로 클라우드에 있는 사용자 기기의 신뢰할 수 있는 제공업체가 WebAPK 민팅 서버에서 생성한 Android 패키지 (APK)입니다. 이 방법은 Google 모바일 서비스 (GMS)가 설치된 기기의 Chrome과 삼성 인터넷 브라우저에서 사용하지만 Galaxy 휴대전화나 태블릿과 같은 삼성 제조 기기에만 적용됩니다. 이 모든 것이 Android 사용자 대부분을 차지합니다.
사용자가 Chrome에서 PWA를 설치하고 WebAPK를 사용하면 발급 서버가 '민트'됩니다. (패키지)하고 PWA용 APK에 서명합니다. 이 프로세스에는 시간이 걸리지만 APK가 준비되면 브라우저에서 해당 앱을 사용자의 기기에 자동으로 설치합니다. 신뢰할 수 있는 제공업체 (Play 서비스 또는 삼성)에서 APK에 서명했으므로 스토어에서 제공하는 다른 앱과 마찬가지로 휴대전화는 보안을 사용 중지하지 않고 APK를 설치합니다. 앱을 사이드로드할 필요가 없습니다.
WebAPK를 통해 설치된 PWA:
- 앱 런처와 홈 화면에 아이콘이 있어야 합니다.
- 설정, 앱에 표시됩니다.
- 배지, 앱 바로가기, OS 내에서 링크 캡처와 같은 여러 기능을 포함할 수 있습니다.
- 아이콘과 앱의 메타데이터를 업데이트할 수 있습니다.
- 두 번 설치할 수 없습니다.
단축키
WebAPK는 Android 사용자에게 최상의 환경을 제공하지만, WebAPK가 항상 만들어지는 것은 아닙니다. 만들 수 없는 경우 브라우저에서 웹사이트 바로가기를 만드는 것으로 대체됩니다. Firefox, Microsoft Edge, Opera, Brave 및 Samsung Internet (삼성 외 기기에서 사용)에는 신뢰할 수 있는 민팅 서버가 없기 때문에 바로가기가 생성됩니다. 발급 서비스를 사용할 수 없거나 PWA가 설치 요구사항을 충족하지 않는 경우에도 Chrome이 실행됩니다.
바로가기로 설치된 PWA:
- 홈 화면에 브라우저 배지가 있는 아이콘이 있습니다 (다음 예 참고).
- 런처 또는 설정, 앱에 아이콘이 없습니다.
- 설치가 필요한 기능은 사용할 수 없습니다.
- 아이콘과 앱 메타데이터를 업데이트할 수 없습니다.
- 동일한 브라우저를 사용하는 경우에도 여러 번 설치할 수 있습니다. 이 경우 모든 인스턴스가 동일한 인스턴스를 가리키고 동일한 스토리지를 사용합니다.
QuickApps
Huawei, ZTE를 비롯한 일부 제조업체는 PWA와 유사하지만 다른 기술 스택을 사용하는 라이트 웹 앱을 만들기 위해 QuickApps라는 플랫폼을 제공합니다. Huawei 브라우저 등 이러한 기기의 일부 브라우저는 QuickApp 스택을 사용하지 않더라도 QuickApp으로 패키징된 PWA를 설치할 수 있습니다.
PWA를 QuickApp으로 설치하면 사용자는 바로가기를 사용할 때와 비슷한 환경을 경험하게 되지만, QuickApps 아이콘 (번개 이미지) 배지가 있는 아이콘이 제공됩니다. QuickApp Center에서도 앱을 실행할 수 있습니다.
설치 메시지 표시
데스크톱 및 Android 기기의 Chromium 기반 브라우저에서는 PWA에서 브라우저의 설치 대화상자를 트리거할 수 있습니다. 설치 프롬프트 챕터에서는 디렉터리를 표시하는 패턴과 이를 구현하는 방법을 다룹니다.
앱 카탈로그 및 스토어
또한 PWA를 앱 카탈로그 및 스토어에 등록하여 도달범위를 넓히고 사용자가 다른 앱을 찾을 수 있는 동일한 위치에서 PWA를 찾을 수 있도록 할 수 있습니다. 대부분의 앱 카탈로그 및 스토어는 전체 웹 앱을 포함하지 않는 패키지 (예: HTML 및 애셋)를 게시할 수 있도록 하는 지원 기술을 지원합니다. 이러한 기술을 사용하면 앱을 로드하고 서비스 워커가 필요한 자산을 캐시할 독립 실행형 웹 렌더링 엔진에 대한 런처만 만들 수 있습니다.
PWA 게시를 지원하는 앱 카탈로그 및 스토어는 다음과 같습니다.
- Android 및 ChromeOS용 Google Play 스토어(신뢰할 수 있는 웹 활동 사용)
- iOS, macOS, iPadOS용 Apple App Store(WKWebView 및 앱 바인딩 도메인 사용)
- Windows 10 및 11용 Microsoft Store(APPX 패키지 사용)
- 삼성 Galaxy Store: 삼성 WebAPK 발급 서버를 사용합니다.
- Huawei AppGallery(HTML 애플리케이션용 QuickApp 컨테이너 사용)
PWA를 앱 카탈로그 및 스토어에 게시하는 방법을 자세히 알아보려면 BubbleWrap CLI 및 PWA Builder를 확인하세요.