통합 가이드

신뢰할 수 있는 웹 활동을 설정할 때 개발자가 작성할 필요가 없음 Android 스튜디오는 필요합니다. 이 가이드는 Android 스튜디오 3.3을 사용하여 작성되었습니다. 설치 방법에 대한 문서를 확인하세요.

신뢰할 수 있는 웹 활동 프로젝트 만들기

신뢰할 수 있는 웹 활동을 사용할 때 프로젝트는 API 16 이상을 타겟팅해야 합니다.

Android 스튜디오를 열고 Start a new Android Studio project를 클릭합니다.

Android 스튜디오에 활동 유형을 선택하라는 메시지가 표시됩니다. 신뢰할 수 있는 웹 활동은 지원 라이브러리에서 제공한 활동이 있는 경우 Add No Activity를 선택하고 다음을 탭합니다.

다음 단계에서는 마법사에 프로젝트 구성을 묻는 메시지가 표시됩니다. 이 각 필드에 대한 간단한 설명:

  • 이름: Android 런처.
  • 패키지 이름: Play 스토어 및 Android 기기 자세한 내용은 문서 패키지 만들기를 위한 요구사항 및 권장사항에 대해 자세히 알아보세요. Android 앱 이름도 있습니다.
  • Save location: Android 스튜디오에서 파일에 프로젝트를 생성할 위치 있습니다.
  • 언어: 프로젝트에 Java 또는 Kotlin 코드를 작성할 필요가 없습니다. 기본값으로 Java를 선택합니다.
  • 최소 API 수준: 지원 라이브러리에는 API 수준 16 이상이 필요합니다. 위 버전에서 API 16을 선택하세요.

인스턴트 앱을 사용하지 않으므로 나머지 체크박스를 선택하지 않은 상태로 둡니다. 또는 AndroidX 아티팩트를 저장하고 Finish를 클릭합니다.

신뢰할 수 있는 웹 활동 지원 라이브러리 다운로드

프로젝트에서 신뢰할 수 있는 웹 활동 라이브러리를 설정하려면 애플리케이션을 수정해야 합니다. 빌드 파일도 포함됩니다. Project Navigator에서 Gradle Scripts 섹션을 찾습니다. build.gradle라는 파일이 두 개 있는데, 조금 혼란스러울 수 있습니다. 괄호 안의 설명은 올바른 것을 식별하는 데 도움이 됩니다.

우리가 찾고 있는 파일은 있습니다.

신뢰할 수 있는 웹 활동 라이브러리는 자바 8 기능 첫 번째 변경 사항은 Java 8을 활성화합니다. compileOptions 섹션을 다음과 같이 android 섹션 하단에 표시합니다.

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 앱 매니페스트

프로젝트 탐색기에서 app 섹션을 펼친 다음 매니페스트를 열고 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 앱 매니페스트 신뢰할 수 있는 웹의 맥락과 관련하여 두 가지 관련 정보가 있습니다. 활동:

  1. meta-data 태그는 신뢰할 수 있는 웹 활동에 어떤 URL을 열어야 하는지 알려줍니다. 변동 android:value 속성을 열려는 PWA의 URL로 바꿉니다. 포함 이 예시에서는 https://airhorner.com입니다.
  2. 두 번째 intent-filter 태그를 사용하면 신뢰할 수 있는 웹 활동이 Android를 가로챌 수 있습니다. https://airhorner.com를 여는 인텐트 android:host 속성 data 태그 내 이 신뢰할 수 있는 웹 활동에서 여는 도메인을 가리켜야 합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

다음 섹션에서는 디지털 애셋 링크 웹사이트와 앱 간의 관계를 확인하고 URL 표시줄을 삭제합니다.

URL 입력란 삭제

신뢰할 수 있는 웹 활동을 사용하려면 Android 애플리케이션 간의 연결이 필요합니다. URL 표시줄을 제거해야 합니다.

이 연결은 다음을 통해 생성됩니다. 디지털 애셋 링크 두 방식, 즉 링크 간 연결이 설정되거나 웹사이트를 방문하도록웹사이트에서 앱으로

앱을 웹사이트 유효성 검사로 설정하거나 Chrome에서 건너뛰도록 설정할 수 있습니다. 웹사이트에서 앱 간 유효성 검사에 사용합니다.

문자열 리소스 파일 app > res > values > strings.xml을 열고 아래 디지털 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 애플리케이션에서 있습니다. 포드를 생성하지 않고 관계의 이 부분을 디버그하는 것이 애플리케이션 검증에 이루어질 수 있습니다

개발 기기에서 이를 테스트하는 방법은 다음과 같습니다.

디버그 모드 사용 설정

  1. 개발 기기에서 Chrome을 열고 chrome://flags(으)로 이동하여 검색합니다. 루팅되지 않은 기기에서 명령줄 사용이라는 항목에 가서 사용 설정됨으로 변경되고 브라우저를 다시 시작합니다.
  2. 다음으로 운영체제의 터미널 애플리케이션에서 Android 디버그 브리지 (Android 스튜디오와 함께 설치)하고 다음 명령어를 실행합니다.
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Chrome을 닫고 Android 스튜디오에서 애플리케이션을 다시 실행합니다. 이 애플리케이션이 이제 전체 화면으로 표시됩니다.

개발자는 두 가지 정보를 수집해야 합니다. 연결을 만들려면 다음 단계를 따르세요.

  • 패키지 이름: 첫 번째 정보는 앱의 패키지 이름입니다. 이 앱을 만들 때 생성된 패키지 이름과 동일한 패키지 이름입니다. 또한 Module build.gradle 내부 Gradle 스크립트 > build.gradle (Module: app)이며 applicationId 속성
  • SHA-256 디지털 지문: Android 애플리케이션이 서명되어야만 서명됨 Play 스토어에 업로드되어야 합니다. 동일한 서명을 사용하여 웹 사이트의 SHA-256 디지털 지문 파일을 통해 업로드 키를 선택합니다.

Android 문서에서는 Android 스튜디오를 사용하여 키를 생성하는 방법을 자세히 설명합니다. 키 저장소의 경로, 별칭, 비밀번호를 기록해 두세요. 다음 단계에서 필요합니다.

다음을 사용하여 SHA-256 디지털 지문을 추출합니다. keytool 다음 명령어를 사용합니다.

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 생성기로 이동하세요. 필드를 작성하고 문 생성을 누릅니다. 생성된 문을 복사합니다. 내 도메인의 URL /.well-known/assetlinks.json에서 제공합니다.

아이콘 생성

Android 스튜디오에서 새 프로젝트를 생성하면 기본 아이콘이 함께 제공됩니다. 개발자는 자신만의 아이콘을 만들어 앱과 차별화하고 싶을 것입니다. 실행할 수 있습니다.

Android 스튜디오에는 Image Asset Studio가 포함되어 있습니다. 이 라이브러리는 모든 텍스트에 대해 올바른 아이콘을 만드는 데 필요한 애플리케이션 니즈에 맞게 조정될 수 있습니다.

Android 스튜디오에서 File > New > Image Asset로 이동하여 Launcher Icons (Adaptative and Legacy)하고 마법사의 단계를 따릅니다. 애플리케이션의 사용자 지정 아이콘을 만듭니다.

서명된 APK 생성

도메인에 있는 assetlinks 파일과 asset_statements 태그 사용 다음 단계는 서명된 앱을 생성하는 것입니다. 다시 말하지만, 이를 위한 단계는 광범위하게 문서화되어 있습니다.

출력 APK는 adb를 사용하여 테스트 기기에 설치할 수 있습니다.

adb install app-release.apk

확인 단계가 실패하면 오류를 확인할 수 있습니다. 메시지를 보내고, OS 터미널에서, 그리고 테스트 기기가 연결되었습니다.

adb logcat | grep -e OriginVerifier -e digital_asset_links

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

스플래시 화면 추가

Chrome 75부터 신뢰할 수 있는 웹 활동에서 스플래시 화면이 지원됩니다. 스플래시 화면은 몇 가지 새로운 이미지 파일과 구성을 살펴보겠습니다

Chrome 75 이상으로 업데이트하고 최신 버전의 신뢰할 수 있는 웹 활동 지원 라이브러리.

스플래시 화면용 이미지 생성

Android 기기는 다양한 화면 크기를 사용할 수 있습니다. 및 픽셀 밀도가 포함됩니다. 스플래시 화면이 모든 기기에서 제대로 표시되도록 하려면 이미지를 생성합니다.

디스플레이 독립적 픽셀 (dp 또는 dip)에 대한 자세한 설명 이 글에서는 다루지 않겠지만 한 가지 예는 모든 밀도의 기기 화면에서 2x2인치의 정사각형을 나타내는 320x320dp 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>

마지막으로 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의 값이 태그는 android:authorities 속성 정의 값과 일치하며 provider 태그

LauncherActivity를 투명하게 만들기

또한 흰색 화면이 표시되지 않도록 LauncherActivity가 투명해야 합니다. LauncherActivity의 반투명 테마를 설정하여 스플래시 전에 표시됩니다.

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

개발자들이 신뢰할 수 있는 웹으로 무엇을 빌드할 수 있을지 무척 기대됩니다. 활동. 의견이 있으면 다음 주소로 문의하세요. @ChromiumDev로 변경합니다.