이 페이지는 Cloud Translation API를 통해 번역되었습니다.

통합 가이드

André Cipriani Bandarra

신뢰할 수 있는 웹 활동을 설정하기 위해 개발자가 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 앱의 패키지 이름을 만드는 데 필요한 요구사항 및 권장사항에 관한 자세한 내용은 문서를 참고하세요.
저장 위치: 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 스튜디오에서 애플리케이션을 다시 실행합니다. 이제 애플리케이션이 전체 화면으로 표시됩니다.

웹사이트에서 앱으로 연결 설정

개발자가 연결을 만들기 위해 앱에서 수집해야 하는 정보는 두 가지입니다.

패키지 이름: 첫 번째 정보는 앱의 패키지 이름입니다. 이는 앱을 만들 때 생성된 패키지 이름과 동일합니다. 모듈 build.gradle 내의 Gradle 스크립트 > build.gradle (모듈: 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 Debug Bridge를 사용하고 테스트 기기를 연결하여 오류 메시지를 확인할 수 있습니다.

adb logcat | grep -e OriginVerifier -e digital_asset_links

업로드 APK가 생성되면 이제 앱을 Play 스토어에 업로드할 수 있습니다.

스플래시 화면 추가

Chrome 75부터 Trusted Web Activities에서 스플래시 화면을 지원합니다. 프로젝트에 몇 가지 새 이미지 파일과 구성을 추가하여 스플래시 화면을 설정할 수 있습니다.

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로 문의해 주세요.