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 애플리케이션에 필요한 구성을 처리하지만, 마지막 단계로 assetlinks.json 파일을 PWA에 추가해야 합니다.
이 파일을 생성하려면 개발자는 사용자가 다운로드하는 APK에 서명하는 데 사용되는 키의 SHA-256 서명이 필요합니다.
키는 여러 가지 방법으로 생성할 수 있으며, 최종 사용자에게 제공되는 APK에 서명한 키를 찾는 가장 쉬운 방법은 Play 스토어에서 직접 다운로드하는 것입니다.
사용자에게 손상된 애플리케이션이 표시되지 않도록 하려면 애플리케이션을 비공개 테스트 채널에 배포하고 테스트 기기에 설치한 다음 Peter의 애셋 링크 도구를 사용하여 앱에 올바른 assetlinks.json 파일을 생성합니다. 생성된 assetlinks.json 파일을 검증 중인 도메인의 /.well-known/assetlinks.json에서 사용할 수 있도록 합니다.
다음에 수행할 작업
프로그레시브 웹 앱은 고품질 웹 환경입니다. 신뢰할 수 있는 웹 활동은 최소 품질 기준을 충족하는 경우 Android 앱에서 이러한 고품질 환경을 여는 새로운 방법입니다.
프로그레시브 웹 앱을 시작하는 경우 훌륭한 PWA를 빌드하는 방법에 관한 가이드를 참고하세요. 이미 PWA가 있는 개발자는 Lighthouse를 사용하여 품질 기준을 충족하는지 확인하세요.
그런 다음 Bubblewrap 또는 PWABuilder를 사용하여 Android 애플리케이션을 생성하고, Play 스토어의 비공개 테스트 채널에 애플리케이션을 업로드하고, Peter의 Asset Link 도구를 사용하여 PWA와 페어링합니다.
마지막으로 애플리케이션을 비공개 테스트 채널에서 프로덕션으로 이동합니다.