신뢰할 수 있는 웹 활동은 특히 웹사이트를 표시하려는 경우 설정하기 어려울 수 있습니다. 이 가이드에서는 신뢰할 수 있는 웹 활동을 사용하는 작은 프로젝트를 만드는 방법을 설명합니다.
이 가이드를 마치면 다음을 할 수 있습니다.
- Bubblewrap을 사용하여 신뢰할 수 있는 웹 활동을 사용하고 인증을 통과하는 애플리케이션을 빌드했습니다.
- 서명 키가 사용되는 시점을 이해합니다.
- Android 애플리케이션이 빌드되는 서명을 확인할 수 있습니다.
- 기본 디지털 애셋 링크 파일을 만드는 방법을 알고 있습니다.
이 가이드를 따르려면 다음이 필요합니다.
- Node.js 10 이상
- 개발을 위해 연결되고 설정된 Android 휴대전화 또는 에뮬레이터 USB 디버깅 사용 설정 실제 휴대전화를 사용하는 경우
- 신뢰할 수 있는 웹 활동을 지원하는 모바일 브라우저
- 신뢰할 수 있는 웹 활동에서 보려는 웹사이트
Android 앱에 신뢰할 수 있는 웹 활동을 사용하여 브라우저 UI 없이 전체 화면 브라우저 탭을 실행할 수 있습니다. 이 기능은 사용자가 소유한 웹사이트로 제한됩니다. 디지털 애셋 링크를 설정하여 소유권을 증명합니다.
신뢰할 수 있는 웹 활동을 실행하면 브라우저에서 디지털 애셋 링크를 확인합니다. 인증에 실패하면 브라우저가 웹사이트를 맞춤 탭으로 표시하도록 대체됩니다.
Bubblewrap 설치 및 구성
Bubblewrap은 개발자가 신뢰할 수 있는 웹 활동을 사용하여 Android 애플리케이션 내에서 프로그레시브 웹 앱을 생성, 빌드, 실행하는 데 도움이 되는 Node.js용 라이브러리 및 명령줄 도구 (CLI) 집합입니다.
다음 명령어를 실행하여 CLI를 설치합니다.
npm i -g @bubblewrap/cli
환경 설정
Bubblewrap을 처음 실행하면 필요한 외부 종속 항목을 자동으로 다운로드하고 설치하라는 메시지가 표시됩니다. 종속 항목이 올바르게 구성되도록 자동 다운로드를 허용하는 것이 좋습니다. 기존 Java 개발 키트 (JDK) 또는 Android 명령줄 도구 설치를 사용하려면 Bubblewrap 문서를 확인하세요.
프로젝트 초기화 및 빌드
PWA를 래핑하는 Android 프로젝트를 초기화합니다.
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap은 웹 매니페스트를 읽고, 개발자에게 Android 프로젝트에서 사용할 값을 확인하도록 요청한 후 이러한 값을 사용하여 프로젝트를 생성합니다.
프로젝트가 생성되면 다음을 실행하여 APK를 생성합니다.
bubblewrap build
실행
빌드 단계에서는 app-release-signed.apk라는 파일을 출력합니다. 이 파일은 테스트를 위해 개발 기기에 설치하거나 출시를 위해 Play 스토어에 업로드할 수 있습니다.
Bubblewrap은 로컬 기기에 애플리케이션을 설치하고 테스트하는 명령어를 제공합니다. 컴퓨터에 연결된 개발 기기에서 다음을 실행합니다.
bubblewrap install
또는 adb 도구를 사용할 수 있습니다.
adb install app-release-signed.apk
이제 기기 런처에서 애플리케이션을 사용할 수 있습니다.
애플리케이션을 열면 웹사이트가 신뢰할 수 있는 웹 활동이 아닌 맞춤 탭으로 실행됩니다. 아직 디지털 애셋 링크 유효성 검사를 설정하지 않았기 때문입니다.
Bubblewrap의 그래픽 사용자 인터페이스 (GUI) 대안
PWA 빌더는 Bubblewrap 라이브러리를 사용하여 신뢰할 수 있는 웹 활동 프로젝트 생성을 지원하는 GUI 인터페이스를 제공합니다. PWA 빌더를 사용하여 PWA를 여는 Android 앱을 만드는 방법에 관한 안내를 확인하세요.
서명 키
디지털 애셋 링크는 APK가 서명된 키를 고려하며 인증 실패의 일반적인 원인은 잘못된 서명을 사용하는 것입니다. (인증에 실패하면 페이지 상단에 브라우저 UI가 있는 맞춤 탭으로 웹사이트가 실행됩니다.) Bubblewrap이 애플리케이션을 빌드하면 init 단계에서 키 설정으로 APK가 생성됩니다. 하지만 Google Play에서 앱을 게시할 때 서명 키를 처리하는 방법에 따라 다른 키가 생성될 수 있습니다. 서명 키와 Bubblewrap 및 Google Play와의 관계에 관해 자세히 알아보세요.
애셋 링크 파일 설정
디지털 애셋 링크는 기본적으로 앱을 가리키는 웹사이트의 파일과 웹사이트를 가리키는 앱의 일부 메타데이터로 구성됩니다.
assetlinks.json 파일을 만든 후 앱이 브라우저에서 올바르게 인증될 수 있도록 웹사이트의 .well-known/assetlinks.json(루트 기준)에 업로드합니다. 서명 키와 관련된 방법에 관한 자세한 내용은 디지털 애셋 링크에 관한 심층 분석을 확인하세요.
브라우저 확인
신뢰할 수 있는 웹 활동은 사용자의 기본 브라우저 선택을 준수하려고 합니다. 사용자의 기본 브라우저가 신뢰할 수 있는 웹 활동을 지원하는 경우 실행됩니다. 그렇지 않은 경우 설치된 브라우저가 신뢰할 수 있는 웹 활동을 지원하면 선택됩니다. 마지막으로 기본 동작은 맞춤 탭 모드로 대체되는 것입니다.
즉, 신뢰할 수 있는 웹 활동과 관련된 문제를 디버깅하는 경우 사용 중인 브라우저가 올바른지 확인해야 합니다. 다음 명령어를 사용하여 사용 중인 브라우저를 확인할 수 있습니다.
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
다음 단계
이 가이드를 따랐다면 신뢰할 수 있는 웹 활동이 작동하고 인증에 실패하는 경우 디버깅할 수 있는 충분한 지식이 있을 것입니다. 그렇지 않은 경우 웹 개발자를 위한 더 많은 Android 개념을 살펴보세요.
다음 단계로 앱 아이콘을 만듭니다. 완료되면 Play 스토어에 앱을 배포하는 것을 고려할 수 있습니다.