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 환경으로 제한됩니다. 즉, Android 앱에서 Cordova API를 사용하기 위해 오픈 웹의 PWA와 별도로 코드베이스를 추가로 유지해야 합니다.
또한 기능 검색 가능성은 항상 예상대로 작동하지 않으며 Android 버전과 OEM 간의 호환성 문제도 문제가 될 수 있습니다. 이러한 솔루션 중 하나를 사용하면 개발자는 추가 품질보증 프로세스가 필요하며 해결 방법을 감지하고 만들기 위해 추가 개발 비용이 발생합니다.
신뢰할 수 있는 웹 활동은 Android의 웹 앱을 위한 새로운 컨테이너입니다.
이제 개발자는 신뢰할 수 있는 웹 활동을 컨테이너로 사용하여 PWA를 Android 앱의 시작 활동으로 포함할 수 있습니다. 이 기술은 브라우저를 활용하여 PWA를 전체 화면으로 렌더링하므로 신뢰할 수 있는 웹 활동이 기본 브라우저와 동일한 웹 플랫폼 기능 및 API와 호환됩니다. 신뢰할 수 있는 웹 활동을 사용하여 Android 앱을 더욱 쉽게 구현할 수 있는 오픈소스 유틸리티도 있습니다.
다른 솔루션에서는 사용할 수 없는 또 다른 이점은 컨테이너가 브라우저와 저장소를 공유한다는 점입니다. 로그인 상태와 사용자 환경설정이 여러 환경에서 원활하게 공유됩니다.
브라우저 호환성
이 기능은 Chrome 버전 75부터 사용할 수 있으며 Firefox에서는 Nightly 버전에 구현했습니다.
품질 기준
웹 개발자는 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 스토어에서 APK를 다운로드하는 것입니다.
사용자에게 손상된 애플리케이션이 표시되지 않도록 하려면 애플리케이션을 비공개 테스트 채널에 배포하고 테스트 기기에 설치한 다음 피터의 애셋 링크 도구를 사용하여 앱의 올바른 assetlinks.json 파일을 생성합니다. 생성된 assetlinks.json 파일을 검사 중인 도메인의 /.well-known/assetlinks.json에서 사용할 수 있도록 합니다.
다음에 수행할 작업
프로그레시브 웹 앱은 고품질 웹 환경입니다. 신뢰할 수 있는 웹 활동은 최소 품질 기준을 충족하는 경우 Android 앱에서 이러한 고품질 환경을 여는 새로운 방법입니다.
프로그레시브 웹 앱을 처음 사용하는 경우 훌륭한 PWA를 빌드하는 방법에 관한 가이드를 읽어보세요. 이미 PWA가 있는 개발자의 경우 Lighthouse를 사용하여 품질 기준을 충족하는지 확인합니다.
그런 다음 Bubblewrap 또는 PWABuilder를 사용하여 Android 애플리케이션을 생성하고 Play 스토어의 비공개 테스트 채널에 애플리케이션을 업로드한 후 Peter의 애셋 링크 도구를 사용하여 PWA와 페어링합니다.
마지막으로 애플리케이션을 비공개 테스트 채널에서 프로덕션으로 이동합니다.