신뢰할 수 있는 웹 활동을 설정하기 위해 개발자가 Java 코드를 작성할 필요는 없지만 Android 스튜디오는 필요합니다. 이 가이드는 Android 스튜디오 3.3을 사용하여 작성되었습니다. 설치 방법에 관한 문서를 확인하세요.
신뢰할 수 있는 웹 활동 프로젝트 만들기
신뢰할 수 있는 웹 활동을 사용하는 경우 프로젝트는 API 16 이상을 타겟팅해야 합니다.
Android 스튜디오를 열고 Start a new Android Studio project를 클릭합니다.
Android 스튜디오에서 Activity 유형을 선택하라는 메시지를 표시합니다. 신뢰할 수 있는 웹 활동은 지원 라이브러리에서 제공하는 Activity를 사용하므로 Add No Activity를 선택하고 Next를 클릭합니다.
다음 단계에서 마법사가 프로젝트 구성을 묻는 메시지를 표시합니다. 다음은 각 필드에 대한 간단한 설명입니다.
- 이름: Android 런처에서 애플리케이션에 사용될 이름입니다.
- 패키지 이름: Play 스토어 및 Android 기기의 Android 애플리케이션 고유 식별자입니다. Android 앱의 패키지 이름을 만드는 데 필요한 요구사항 및 권장사항에 관한 자세한 내용은 문서를 참고하세요.
- Save location: Android 스튜디오에서 파일 시스템에 프로젝트를 만들 위치
- Language: 프로젝트에 Java 또는 Kotlin 코드를 작성할 필요가 없습니다. 기본값으로 Java를 선택합니다.
- 최소 API 수준: 지원 라이브러리에는 API 수준 16 이상이 필요합니다. 위 버전에서 API 16을 선택하세요.
빠른 실행 앱 또는 AndroidX 아티팩트를 사용하지 않으므로 나머지 체크박스는 선택 해제 상태로 둔 다음 완료를 클릭합니다.
신뢰할 수 있는 웹 활동 지원 라이브러리 가져오기
프로젝트에서 신뢰할 수 있는 웹 활동 라이브러리를 설정하려면 애플리케이션 빌드 파일을 수정해야 합니다. Project Navigator에서 Gradle Scripts 섹션을 찾습니다.
build.gradle
라는 파일이 두 개 있는데 다소 혼란스러울 수 있으며 괄호 안의 설명을 통해 올바른 파일을 식별할 수 있습니다.
찾고 있는 파일은 이름 옆에 모듈 Module이 있는 파일입니다.
신뢰할 수 있는 웹 활동 라이브러리는 Java 8 기능을 사용하며 첫 번째 변경사항은 Java 8을 사용 설정합니다. 아래와 같이 android
섹션 하단에 compileOptions
섹션을 추가합니다.
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
다음 단계에서는 신뢰할 수 있는 웹 활동 지원 라이브러리를 프로젝트에 추가합니다. dependencies
섹션에 새 종속 항목을 추가합니다.
dependencies {
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}
Android 스튜디오에 프로젝트를 다시 동기화하라는 메시지가 표시됩니다. 지금 동기화 링크를 클릭하고 동기화합니다.
신뢰할 수 있는 웹 활동 실행
신뢰할 수 있는 웹 활동을 설정하려면 Android 앱 매니페스트를 수정하면 됩니다.
Project Navigator에서 app 섹션과 manifests를 차례로 펼치고 AndroidManifest.xml
를 더블클릭하여 파일을 엽니다.
프로젝트를 만들 때 Android 스튜디오에 프로젝트에 활동을 추가하지 말라고 요청했으므로 매니페스트는 비어 있고 애플리케이션 태그만 포함되어 있습니다.
application
태그에 activity
태그를 삽입하여 신뢰할 수 있는 웹 활동을 추가합니다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
<activity
android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
<!-- Edit android:value to change the url opened by the Trusted Web Activity -->
<meta-data
android:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="https://airhorner.com" />
<!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<!--
This intent-filter allows the Trusted Web Activity to handle Intents to open
airhorner.com.
-->
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE"/>
<!-- Edit android:host to handle links to the target URL-->
<data
android:scheme="https"
android:host="airhorner.com"/>
</intent-filter>
</activity>
</application>
</manifest>
XML에 추가된 태그는 표준 Android 앱 매니페스트입니다. 신뢰할 수 있는 웹 활동의 컨텍스트와 관련된 두 가지 정보가 있습니다.
meta-data
태그는 신뢰할 수 있는 웹 활동에 열어야 할 URL을 알려줍니다.android:value
속성을 열려는 PWA의 URL로 변경합니다. 이 예시에서는https://airhorner.com
입니다.- 두 번째
intent-filter
태그를 사용하면 신뢰할 수 있는 웹 활동이https://airhorner.com
를 여는 Android 인텐트를 가로챌 수 있습니다.data
태그 내의android:host
속성은 신뢰할 수 있는 웹 활동에서 열리는 도메인을 가리켜야 합니다.
다음 섹션에서는 Digital AssetLinks를 설정하여 웹사이트와 앱 간의 관계를 확인하고 URL 표시줄을 삭제하는 방법을 보여줍니다.
URL 표시줄 삭제
신뢰할 수 있는 웹 활동을 사용하려면 Android 애플리케이션과 웹사이트 간에 연결을 설정하여 URL 표시줄을 삭제해야 합니다.
이 연결은 디지털 애셋 링크를 통해 생성되며 앱에서 웹사이트로 연결하고 웹사이트에서 앱으로 연결하는 등 두 가지 방법으로 연결을 설정해야 합니다.
디버깅을 위해 앱을 웹사이트 유효성 검사로 설정하고 Chrome을 웹사이트 유효성 검사를 건너뛰도록 설정할 수 있습니다.
앱에서 웹사이트로 연결 설정
문자열 리소스 파일 app > res > values > strings.xml
를 열고 아래에 Digital AssetLinks 문을 추가합니다.
<resources>
<string name="app_name">AirHorner Trusted Web Activity</string>
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://airhorner.com\"}
}]
</string>
</resources>
신뢰할 수 있는 웹 활동에서 연 스키마 및 도메인과 일치하도록 site
속성의 콘텐츠를 변경합니다.
Android 앱 매니페스트 파일 AndroidManifest.xml
로 돌아가 새 meta-data
태그를 추가하여 문에 연결합니다. 이번에는 application
태그의 하위 요소로 추가합니다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data
android:name="asset_statements"
android:resource="@string/asset_statements" />
<activity>
...
</activity>
</application>
</manifest>
이제 Android 애플리케이션과 웹사이트 간의 관계가 설정되었습니다. 애플리케이션 검증을 위한 웹사이트를 만들지 않고도 관계의 이 부분을 디버그하는 것이 좋습니다.
개발 기기에서 이를 테스트하는 방법은 다음과 같습니다.
디버그 모드 사용 설정
- 개발 기기에서 Chrome을 열고
chrome://flags
로 이동하여 루팅되지 않은 기기에서 명령줄 사용 설정이라는 항목을 검색한 다음 ENABLED로 변경하고 브라우저를 다시 시작합니다. - 그런 다음 운영체제의 터미널 애플리케이션에서 Android 디버그 브리지(Android 스튜디오와 함께 설치됨)를 사용하고 다음 명령어를 실행합니다.
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"
Chrome을 닫고 Android 스튜디오에서 애플리케이션을 다시 실행합니다. 이제 애플리케이션이 전체 화면으로 표시됩니다.
웹사이트와 앱 간의 연결 설정
개발자가 연결을 만들기 위해 앱에서 수집해야 하는 정보는 두 가지입니다.
- Package Name: 첫 번째 정보는 앱의 패키지 이름입니다. 이는 앱을 만들 때 생성되는 것과 동일한 패키지 이름입니다. Module
build.gradle
내부의 Gradle Scripts > build.gradle (Module: app) 아래에도 있으며applicationId
속성의 값입니다. - SHA-256 디지털 지문: Android 애플리케이션을 Play 스토어에 업로드하려면 로그인해야 합니다. 업로드 키의 SHA-256 디지털 지문을 통해 웹사이트와 앱 간의 연결을 설정하는 데 동일한 서명이 사용됩니다.
Android 문서에서는 Android 스튜디오를 사용하여 키를 생성하는 방법을 자세히 설명합니다. 다음 단계에서 필요하므로 키 저장소의 경로, 별칭, 비밀번호를 기록해 둡니다.
keytool과 다음 명령어를 사용하여 SHA-256 지문을 추출합니다.
keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]
SHA-256 지문 값은 인증서 지문 섹션 아래에 출력됩니다. 다음은 출력 예입니다.
keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password
Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3
두 가지 정보를 모두 준비했다면 assetlinks 생성기로 이동하여 입력란을 채우고 Generate Statement(문구 생성)를 클릭합니다. 생성된 문을 복사하여 도메인의 URL /.well-known/assetlinks.json
에서 제공합니다.
아이콘 만들기
Android 스튜디오에서 새 프로젝트를 만들면 기본 아이콘이 함께 제공됩니다. 개발자는 자체 아이콘을 만들어 Android 런처에서 다른 애플리케이션과 차별화하고자 할 것입니다.
Android 스튜디오에는 애플리케이션 요구사항에 맞는 모든 해상도와 모양에 맞는 올바른 아이콘을 만드는 데 필요한 도구를 제공하는 Image Asset Studio가 포함되어 있습니다.
Android 스튜디오에서 File > New > Image Asset
로 이동하여 Launcher Icons (Adaptative and Legacy)
를 선택하고 마법사의 단계에 따라 애플리케이션의 맞춤 아이콘을 만듭니다.
서명된 APK 생성
도메인에 assetlinks
파일이 있고 Android 애플리케이션에 asset_statements
태그가 구성되면 다음 단계는 서명된 앱을 생성하는 것입니다. 이 단계에 관한 안내는 널리 문서화되어 있습니다.
출력 APK는 adb를 사용하여 테스트 기기에 설치할 수 있습니다.
adb install app-release.apk
확인 단계가 실패하면 OS 터미널에서 그리고 테스트 기기가 연결된 상태에서 Android 디버그 브리지를 사용하여 오류 메시지를 확인할 수 있습니다.
adb logcat | grep -e OriginVerifier -e digital_asset_links
업로드 APK가 생성되면 이제 앱을 Play 스토어에 업로드할 수 있습니다.
스플래시 화면 추가
Chrome 75부터 신뢰할 수 있는 웹 활동에서 스플래시 화면이 지원됩니다. 스플래시 화면은 프로젝트에 몇 가지 새 이미지 파일과 구성을 추가하여 설정할 수 있습니다.
Chrome 75 이상으로 업데이트하고 최신 버전의 신뢰할 수 있는 웹 활동 지원 라이브러리를 사용해야 합니다.
스플래시 화면의 이미지 생성
Android 기기의 화면 크기와 픽셀 밀도는 다를 수 있습니다. 스플래시 화면이 모든 기기에서 잘 보이도록 하려면 각 픽셀 밀도에 맞는 이미지를 생성해야 합니다.
디스플레이 독립형 픽셀 (dp 또는 dip)에 관한 전체 설명은 이 도움말의 범위를 벗어나지만, 한 가지 예로 320x320dp 이미지를 만드는 경우를 들 수 있습니다. 이 이미지는 모든 밀도의 기기 화면에서 2x2인치 정사각형을 나타내며 mdpi 밀도에서 320x320픽셀과 같습니다.
이를 통해 다른 픽셀 밀도에 필요한 크기를 파생할 수 있습니다. 다음은 픽셀 밀도, 기본 크기(320x320dp)에 적용된 배율, 결과 크기(단위: 픽셀), Android 스튜디오 프로젝트에 이미지를 추가해야 하는 위치가 포함된 목록입니다.
밀도 | 배율 | 크기 | 프로젝트 위치 |
---|---|---|---|
mdpi (기준) | 1.0배 | 320x320 px | /res/drawable-mdpi/ |
ldpi | 0.75배 | 240x240 px | /res/drawable-ldpi/ |
hdpi | 1.5배 | 480x480 px | /res/drawable-hdpi/ |
xhdpi | 2.0배 | 640x640 px | /res/drawable-xhdpi/ |
xxhdpi | 3.0배속 | 960x960 px | /res/drawable-xxhdpi/ |
xxxhdpi | 4.0배 | 1280x1280 px | /res/drawable-xxxhdpi/ |
애플리케이션 업데이트
스플래시 화면의 이미지가 생성되었으므로 이제 프로젝트에 필요한 구성을 추가해야 합니다.
먼저 Android 매니페스트 (AndroidManifest.xml
)에 content-provider를 추가합니다.
<application>
...
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="com.example.twa.myapplication.fileprovider"
android:grantUriPermissions="true"
android:exported="false">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/filepaths" />
</provider>
</application>
그런 다음 res/xml/filepaths.xml
리소스를 추가하고 TWA 스플래시 화면의 경로를 지정합니다.
<paths>
<files-path path="twa_splash/" name="twa_splash" />
</paths>
마지막으로 Android 매니페스트에 meta-tags
를 추가하여 LauncherActivity를 맞춤설정합니다.
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
...
<meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
android:resource="@drawable/splash"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
android:resource="@color/colorPrimary"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
android:value="300"/>
<meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
android:value="com.example.twa.myapplication.fileprovider"/>
...
</activity>
android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY
태그의 값이 provider
태그 내의 android:authorities
속성에 정의된 값과 일치하는지 확인합니다.
LauncherActivity를 투명하게 만들기
또한 LauncherActivity에 반투명 테마를 설정하여 스플래시 전에 흰색 화면이 표시되지 않도록 LauncherActivity가 투명해야 합니다.
<application>
...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
...
</activity>
</application>
개발자들이 신뢰할 수 있는 웹 활동으로 무엇을 빌드할지 기대가 큽니다. 의견이 있으면 @ChromiumDev로 문의해 주세요.