Android의 WebAPK

사용자가 Android의 홈 화면에 프로그레시브 웹 앱을 추가하면 Chrome에서 APK(WebAPK라고도 함)를 자동으로 생성합니다. APK를 통해 설치하면 앱이 앱 런처, Android의 앱 설정에 표시되고 일련의 인텐트 필터를 등록할 수 있습니다.

Android에서 PWA를 설치하면 프로그레시브 웹 앱을 사용자의 홈 화면에 추가하는 것 이상을 할 수 있습니다. Chrome은 앱의 특수 APK를 자동으로 생성하고 설치합니다. 이를 WebAPK라고도 합니다. APK를 통해 설치하면 앱이 앱 런처, Android의 앱 설정에 표시되고 일련의 인텐트 필터를 등록할 수 있습니다.

WebAPK를 생성하기 위해 Chrome은 웹 앱 매니페스트 및 기타 메타데이터를 확인합니다. 매니페스트 업데이트가 감지되면 Chrome에서 새 APK를 생성해야 합니다.

Android 인텐트 필터

프로그레시브 웹 앱이 Android에 설치되면 앱 범위 내의 모든 URL에 관한 인텐트 필터 집합이 등록됩니다. 사용자가 앱 범위 내에 있는 링크를 클릭하면 브라우저 탭 내에서 열리는 대신 앱이 열립니다.

다음과 같은 부분 manifest.json를 고려해 보세요.

"start_url": "/",
"display": "standalone",

이를 사용하는 웹 앱이 앱 런처에서 실행되면 https://example.com/가 브라우저 크롬 없이 독립형 앱으로 열립니다.

WebAPK에는 다음과 같은 인텐트 필터가 포함됩니다.

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:scheme="https"
    android:host="example.com"
    android:pathPrefix="/" />
</intent-filter>

사용자가 설치된 앱 내에서 https://example.com/read로 연결되는 링크를 클릭하면 인텐트에 의해 포착되어 프로그레시브 웹 앱에서 열립니다.

scope를 사용하여 인텐트 필터 제한

프로그레시브 웹 앱이 사이트 내의 모든 URL을 처리하지 않도록 하려면 웹 앱 매니페스트에 scope 속성을 추가하면 됩니다. scope 속성은 URL이 origin + scope와 일치하는 경우에만 웹 앱을 열도록 Android에 지시합니다. 이를 통해 앱에서 처리할 URL과 브라우저에서 열어야 할 URL을 제어할 수 있습니다. 이는 앱과 앱 외부 콘텐츠가 동일한 도메인에 있는 경우에 유용합니다.

다음과 같은 부분 manifest.json를 고려해 보세요.

"scope": "/app/",
"start_url": "/app/",
"display": "standalone",

앱 런처에서 실행하면 브라우저 크롬 없이 독립형 앱으로 https://example.com/app/이 열립니다.

이전과 마찬가지로 생성된 WebAPK에는 인텐트 필터가 포함되지만 APK의 AndroidManifest.xml에는 다른 android:pathPrefix 속성이 포함됩니다.

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:scheme="https"
    android:host="example.com"
    android:pathPrefix="/app/" />
</intent-filter>

몇 가지 예를 살펴보겠습니다.

권장사항

https://example.com/app/ - /app/

권장사항

https://example.com/app/read/book - /app/

금지사항

https://example.com/help/ - /app/에 없음

금지사항

https://example.com/about/ - /app/에 없음

scope, scope를 설정하지 않으면 어떻게 되는지, scope를 사용하여 앱 범위를 정의하는 방법에 관한 자세한 내용은 scope를 참고하세요.

권한 관리

권한은 다른 웹 앱과 동일한 방식으로 작동하며 설치 시 요청할 수 없습니다. 대신 런타임에 요청해야 하며, 가능하면 실제로 필요한 경우에만 요청해야 합니다. 예를 들어 첫 로드 시 카메라 권한을 요청하지 말고 대신 사용자가 사진을 찍으려고 할 때까지 기다리세요.

저장소 및 앱 상태 관리

프로그레시브 웹 앱이 APK를 통해 설치되더라도 Chrome은 현재 프로필을 사용하여 데이터를 저장하며, 데이터는 분리되지 않습니다. 이렇게 하면 브라우저와 설치된 앱 간에 공유 환경을 사용할 수 있습니다. 쿠키가 공유되고 활성 상태이며 모든 클라이언트 측 저장소에 액세스할 수 있고 서비스 워커가 설치되어 실행 준비가 됩니다.

WebAPK 업데이트

WebAPK 업데이트 방법에 관한 정보는 Chrome에서 웹 앱 매니페스트 업데이트를 처리하는 방법으로 이동했습니다.

자주 묻는 질문(FAQ)

스플래시 화면을 생성하는 데 사용되는 아이콘은 무엇인가요? :
플래시 화면에는 192픽셀 및 512픽셀 아이콘을 2개 이상 제공하는 것이 좋습니다. 스플래시 화면의 아이콘이 너무 작다는 사용자의 의견이 접수되었습니다. Chrome 71 이상에서 생성된 WebAPK는 스플래시 화면에 더 큰 아이콘을 표시합니다. 권장 아이콘이 제공되는 한 별도의 조치를 취할 필요가 없습니다.
사용자가 사이트의 네이티브 앱을 이미 설치한 경우 어떻게 되나요?
현재의 홈 화면에 추가와 마찬가지로 사용자가 네이티브 앱과 관계없이 사이트를 추가할 수 있습니다. 사용자가 둘 다 설치할 가능성이 있는 경우 사이트의 아이콘이나 이름을 네이티브 앱과 구분하는 것이 좋습니다.
사용자가 Chrome의 캐시를 지우면 설치된 사이트의 저장용량이 삭제되나요?
예.
새 기기를 구매하면 앱이 다시 설치되나요?
현재는 지원되지 않지만 중요한 영역이라고 생각하며 이를 지원할 방법을 모색하고 있습니다.
권한은 어떻게 처리되나요? Chrome 메시지가 표시되나요, 아니면 Android 메시지가 표시되나요?
권한은 계속 Chrome을 통해 관리됩니다. 사용자에게 권한을 부여하라는 Chrome 메시지가 표시되며 Chrome 설정에서 권한을 수정할 수 있습니다.
이 기능은 어떤 Android 버전에서 작동하나요?
프로그레시브 웹 앱은 Android용 Chrome을 실행하는 모든 Android 버전(특히 Jelly Bean 이상)에 설치할 수 있습니다.
WebView를 사용하나요?
아니요. 사이트는 사용자가 사이트를 추가한 Chrome 버전에서 열립니다.
생성된 APK를 Play 스토어에 업로드할 수 있나요?
아니요. 자체 APK를 업로드하려면 신뢰할 수 있는 웹 활동을 확인하세요.
Play 스토어에 표시되나요?
아니요. Play 스토어에 등록하기 위해 자체 APK를 업로드하려면 신뢰할 수 있는 웹 활동을 확인하세요.
Android용 다른 브라우저의 개발자입니다. 이처럼 원활한 설치 프로세스를 사용할 수 있나요? :
문제를 해결하기 위해 노력하고 있습니다. Google은 Android의 모든 브라우저에서 이 기능을 사용할 수 있도록 최선을 다하고 있으며 곧 자세한 내용을 공유해 드리겠습니다.