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

통합 가이드

앙드레 치프리아니 반다라

Twitter GitHub Glitch Mastodon 홈페이지

신뢰할 수 있는 웹 활동을 설정하기 위해 개발자가 자바 코드를 작성할 필요는 없지만 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로 문의해 주세요.