신뢰할 수 있는 웹 활동을 설정하기 위해 개발자가 자바 코드를 작성할 필요는 없지만 Android 스튜디오는 필요합니다. 이 가이드는 Android 스튜디오 3.3을 사용하여 작성되었습니다. 설치 방법에 관한 문서를 확인하세요.
신뢰할 수 있는 웹 활동 프로젝트 만들기
신뢰할 수 있는 웹 활동을 사용하는 경우 프로젝트에서 API 16 이상을 타겟팅해야 합니다.
Android 스튜디오를 열고 Start a new Android Studio project를 클릭합니다.
Android 스튜디오에 Activity 유형을 선택하라는 메시지가 표시됩니다. 신뢰할 수 있는 웹 활동은 지원 라이브러리에서 제공하는 활동을 사용하므로 Add No Activity를 선택하고 Next를 클릭합니다.
다음 단계로 마법사에서 프로젝트 구성을 묻는 메시지를 표시합니다. 다음은 각 필드에 관한 간단한 설명입니다.
- 이름: Android 런처에서 애플리케이션에 사용될 이름입니다.
- 패키지 이름: Play 스토어 및 Android 기기의 Android 애플리케이션의 고유 식별자입니다. Android 앱의 패키지 이름을 만들기 위한 요구사항 및 권장사항에 관한 자세한 내용은 문서를 참고하세요.
- Save location: Android 스튜디오가 파일 시스템에서 프로젝트를 만드는 위치입니다.
- 언어: 프로젝트에서 자바 또는 Kotlin 코드를 작성할 필요가 없습니다. Java를 기본값으로 선택합니다.
- 최소 API 수준: 지원 라이브러리에는 API 수준 16 이상이 필요합니다. 위의 아무 버전이든 API 16을 선택하세요.
인스턴트 앱 또는 AndroidX 아티팩트를 사용하지 않으므로 나머지 체크박스는 선택하지 않은 상태로 두고 Finish를 클릭합니다.
신뢰할 수 있는 웹 활동 지원 라이브러리 이용
프로젝트에서 신뢰할 수 있는 웹 활동 라이브러리를 설정하려면 애플리케이션 빌드 파일을 수정해야 합니다. 프로젝트 탐색기에서 Gradle Scripts 섹션을 찾습니다.
build.gradle
라는 파일이 두 개 있는데 다소 혼란스러울 수 있으며 괄호 안의 설명을 통해 올바른 파일을 식별하는 데 도움이 됩니다.
찾고 있는 파일은 이름 옆에 모듈 Module이 있는 파일입니다.
신뢰할 수 있는 웹 활동 라이브러리는 자바 8 기능을 사용하며 첫 번째 변경사항으로 자바 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 스튜디오에 프로젝트를 한 번 더 동기화하라는 메시지가 표시됩니다. Sync Now 링크를 클릭하고 동기화합니다.
신뢰할 수 있는 웹 활동 시작
신뢰할 수 있는 웹 활동은 Android 앱 매니페스트를 수정하여 설정할 수 있습니다.
프로젝트 탐색기에서 앱 섹션, 매니페스트를 차례로 펼친 다음 AndroidManifest.xml
를 더블클릭하여 파일을 엽니다.
프로젝트를 생성할 때 Android 스튜디오에 활동을 추가하지 않도록 요청했으므로 매니페스트는 비어 있고 애플리케이션 태그만 포함합니다.
activity
태그를 application
태그에 삽입하여 신뢰할 수 있는 웹 활동을 추가합니다.
<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
속성은 신뢰할 수 있는 웹 활동에서 열려 있는 도메인을 가리켜야 합니다.
다음 섹션에서는 디지털 애셋 링크를 설정하여 웹사이트와 앱의 관계를 확인하고 URL 표시줄을 삭제하는 방법을 보여줍니다.
URL 입력란 삭제
신뢰할 수 있는 웹 활동을 사용하려면 URL 표시줄을 제거하려면 Android 애플리케이션과 웹사이트를 연결해야 합니다.
이러한 연결은 디지털 애셋 링크를 통해 생성되며 앱에서 웹사이트로 또는 웹사이트에서 앱으로 두 가지 방식으로 연결되어야 합니다.
디버깅 목적으로 앱을 웹사이트 유효성 검사로 설정하고 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
로 이동한 후 루팅되지 않은 기기에서 명령줄 사용 설정이라는 항목을 검색하고 사용 설정됨으로 변경한 후 브라우저를 다시 시작합니다. - 그런 다음 운영체제의 터미널 애플리케이션에서 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 디지털 지문: Play 스토어에 업로드하려면 Android 애플리케이션을 서명해야 합니다. 업로드 키의 SHA-256 디지털 지문을 통해 웹사이트와 앱을 연결하는 데 동일한 서명이 사용됩니다.
Android 문서에서는 Android 스튜디오를 사용하여 키를 생성하는 방법을 자세히 설명합니다. 다음 단계에서 필요하므로 키 저장소의 path, alias, passwords를 기록해 둡니다.
다음 명령어와 함께 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를 누릅니다. 생성된 문을 복사하여 /.well-known/assetlinks.json
URL의 도메인에서 제공합니다.
아이콘 생성
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/ |
애플리케이션 업데이트
스플래시 화면 이미지가 생성되었으므로 이제 필요한 구성을 프로젝트에 추가할 차례입니다.
먼저 content-provider를
Android 매니페스트 (AndroidManifest.xml
)에 추가합니다.
<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>
마지막으로 meta-tags
를 Android 매니페스트에 추가하여 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로 문의해 주세요.