Android 앱에서 PWA 시작
프로그레시브 웹 앱 (PWA)은 앱과 유사한 기능을 사용하여 빠르고 안정적이며 매력적인 고품질 환경을 만드는 웹 애플리케이션입니다.
웹은 도달범위가 넓고 사용자가 새로운 경험을 발견할 수 있는 강력한 방법을 제공합니다. 하지만 사용자는 운영체제 저장소에서 애플리케이션을 검색하는 데도 익숙합니다. 대부분의 경우 이러한 사용자는 찾고 있는 브랜드나 서비스에 이미 익숙하며 높은 수준의 의도를 가지고 있어 평균 참여도 측정항목보다 높은 결과를 낳습니다.
Play 스토어는 Android 앱을 위한 스토어이며, 개발자는 Android 앱에서 프로그레시브 웹 앱을 열고자 하는 경우가 많습니다.
신뢰할 수 있는 웹 활동은 브라우저가 Android 앱 내에서 PWA를 렌더링하는 완벽한 웹 플랫폼 호환 컨테이너를 제공하도록 하는 개방형 표준입니다. 이 기능은 Chrome에서 사용할 수 있으며 Firefox Nightly에서 개발 중입니다.
기존 솔루션이 제한적임
Android WebView와 같은 기술이나 Cordova와 같은 프레임워크를 사용하여 항상 Android 앱에 웹 환경을 포함할 수 있었습니다.
Android WebView의 제한사항은 브라우저를 대체하기 위한 것이 아니라는 점입니다. Android WebView는 Android 앱에서 웹 UI를 사용하기 위한 개발자 도구이며 연락처 선택 도구 또는 파일 시스템과 같은 최신 웹 플랫폼 기능에 대한 온전한 액세스를 제공하지는 않습니다. 무엇보다
Cordova는 WebView의 단점을 보완하도록 설계되었지만 이제 API는 Cordova 환경으로 제한됩니다. 즉, 오픈 웹의 PWA와 별도로 Android 앱에 Cordova API를 사용하기 위한 추가 코드베이스를 유지해야 합니다.
또한 기능 검색 기능이 예상대로 작동하지 않는 경우가 많으며 Android 버전과 OEM 간의 호환성 문제도 문제가 될 수 있습니다. 이러한 솔루션 중 하나를 사용하는 경우 개발자는 추가 품질 보증 프로세스가 필요하며 해결 방법을 감지하고 만들기 위해 추가 개발 비용이 발생합니다.
신뢰할 수 있는 웹 활동은 Android의 웹 앱을 위한 새로운 컨테이너입니다
개발자는 이제 신뢰할 수 있는 웹 활동을 컨테이너로 사용하여 PWA를 Android 앱의 실행 활동으로 포함할 수 있습니다. 이 기술은 브라우저를 활용하여 PWA를 전체 화면으로 렌더링하므로 신뢰할 수 있는 웹 활동이 기본 브라우저와 동일한 웹 플랫폼 기능 및 API와 호환되도록 합니다. 신뢰할 수 있는 웹 활동을 사용하여 Android 앱을 더 쉽게 구현할 수 있는 오픈소스 유틸리티도 있습니다.
다른 솔루션에서는 사용할 수 없는 또 다른 장점은 컨테이너가 브라우저와 저장소를 공유한다는 것입니다. 로그인 상태와 사용자 환경설정이 환경 전반에서 원활하게 공유됩니다.
브라우저 호환성
이 기능은 버전 75부터 Chrome에서 사용할 수 있었으며 Firefox에서는 매일 밤 이 기능을 구현합니다.
품질 기준
웹 개발자는 Android 앱에 웹 콘텐츠를 포함하려고 할 때 신뢰할 수 있는 웹 활동을 사용해야 합니다.
신뢰할 수 있는 웹 활동의 웹 콘텐츠는 PWA 설치 가능 기준을 충족해야 합니다.
또한 사용자가 Android 애플리케이션에서 기대하는 동작에 맞추기 위해 Chrome 86에 변경사항이 도입되었으며, 다음 시나리오를 처리하지 못하면 비정상 종료로 간주됩니다.
- 애플리케이션 실행 시 디지털 애셋 링크를 인증하지 못했습니다.
- 오프라인 네트워크 리소스 요청에 대해 HTTP 200을 반환하지 못했습니다.
- 탐색 요청에서 HTTP 404 또는 5xx 오류를 반환합니다.
신뢰할 수 있는 웹 활동에서 이러한 시나리오 중 하나가 발생하면 사용자에게 Android 애플리케이션이 비정상 종료됩니다. 서비스 워커에서 이러한 시나리오를 처리하는 방법에 대한 안내 확인
또한 애플리케이션은 정책 준수와 같은 추가적인 Android 관련 기준도 충족해야 합니다.
도구
신뢰할 수 있는 웹 활동을 활용하려는 웹 개발자는 PWA를 Android 애플리케이션으로 변환하기 위해 새로운 기술이나 API를 학습할 필요가 없습니다. Bubblewrap과 PWABuilder는 함께 라이브러리, 명령줄 인터페이스 (CLI), 그래픽 사용자 인터페이스 (GUI) 형태로 개발자 도구를 제공합니다.
버블랩
Bubblewrap 프로젝트는 NodeJS 라이브러리와 명령줄 인터페이스 (CLI) 형태로 Android 앱을 생성합니다.
새 프로젝트를 부트스트랩하려면 이 도구를 실행하고 웹 매니페스트의 URL을 전달하면 됩니다.
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
이 도구로 프로젝트를 빌드할 수도 있으며, 아래 명령어를 실행하면 Play 스토어에 업로드할 준비가 된 Android 애플리케이션이 출력됩니다.
npx @bubblewrap/cli build
이 명령어를 실행하면 app-release-signed.apk라는 파일을 프로젝트의 루트 디렉터리에서 사용할 수 있습니다. 이 파일이 Play 스토어에 업로드됩니다.
PWABuilder
개발자는 PWABuilder를 사용하여 기존 웹사이트를 프로그레시브 웹 앱으로 변환할 수 있습니다. 또한 Bubblewrap과 통합되어 이러한 PWA를 Android 앱으로 래핑하는 GUI 인터페이스를 제공합니다. PWABuilder팀에서는 도구를 사용하여 Android 애플리케이션을 생성하는 방법에 관한 유용한 블로그 게시물을 게시했습니다.
Android 앱에서 PWA의 소유권 확인
훌륭한 프로그레시브 웹 앱을 빌드하는 개발자는 다른 개발자가 본인의 허가 없이 이 앱으로 Android 앱을 빌드하는 것을 원하지 않을 것입니다. 이러한 일이 발생하지 않도록 하려면 Android 애플리케이션을 디지털 애셋 링크라는 도구를 사용하여 프로그레시브 웹 앱과 페어링해야 합니다.
Bubblewrap과 PWABuilder는 Android 애플리케이션의 필수 구성을 처리하지만 마지막 단계는 PWA에 assetlinks.json 파일을 추가하는 것입니다.
이 파일을 생성하려면 개발자가 사용자가 다운로드하는 APK에 서명하는 데 사용된 키의 SHA-256 서명이 필요합니다.
키는 여러 가지 방법으로 생성할 수 있으며 최종 사용자에게 제공되는 APK에 서명한 키를 찾는 가장 쉬운 방법은 Play 스토어에서 다운로드하는 것입니다.
손상된 애플리케이션이 사용자에게 표시되지 않도록 하려면 애플리케이션을 비공개 테스트 채널에 배포하고 테스트 기기에 설치한 다음 피터의 애셋 링크 도구를 사용하여 앱의 올바른 assetlinks.json 파일을 생성합니다. 생성된 assetlinks.json 파일을 검사 중인 도메인의 /.well-known/assetlinks.json에서 사용할 수 있도록 합니다.
다음에 수행할 작업
프로그레시브 웹 앱은 고품질 웹 환경입니다. 신뢰할 수 있는 웹 활동은 최소 품질 기준을 충족하는 경우 Android 앱에서 이러한 고품질 환경을 여는 새로운 방법입니다.
프로그레시브 웹 앱을 시작하는 경우 우수한 PWA 빌드 방법 안내를 읽어보세요. 이미 PWA가 있는 개발자의 경우 Lighthouse를 사용하여 품질 기준을 충족하는지 확인합니다.
그런 다음 Bubblewrap 또는 PWABuilder를 사용하여 Android 애플리케이션을 생성하고 Play 스토어의 비공개 테스트 채널에 애플리케이션을 업로드한 다음 피터의 Asset Link 도구를 사용하여 PWA와 페어링합니다.
마지막으로 애플리케이션을 비공개 테스트 채널에서 프로덕션으로 이전합니다.