신뢰할 수 있는 웹 활동을 설정할 때 개발자가 작성할 필요가 없음 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 앱 매니페스트 신뢰할 수 있는 웹의 맥락과 관련하여 두 가지 관련 정보가 있습니다. 활동:
meta-data태그는 신뢰할 수 있는 웹 활동에 어떤 URL을 열어야 하는지 알려줍니다. 변동android:value속성을 열려는 PWA의 URL로 바꿉니다. 포함 이 예시에서는https://airhorner.com입니다.- 두 번째
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 애플리케이션에서 있습니다. 포드를 생성하지 않고 관계의 이 부분을 디버그하는 것이 애플리케이션 검증에 이루어질 수 있습니다
개발 기기에서 이를 테스트하는 방법은 다음과 같습니다.
디버그 모드 사용 설정
- 개발 기기에서 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 스튜디오에서 애플리케이션을 다시 실행합니다. 이 애플리케이션이 이제 전체 화면으로 표시됩니다.
웹사이트와 앱 간의 연결 설정
개발자는 두 가지 정보를 수집해야 합니다. 연결을 만들려면 다음 단계를 따르세요.
- 패키지 이름: 첫 번째 정보는 앱의 패키지 이름입니다. 이
앱을 만들 때 생성된 패키지 이름과 동일한 패키지 이름입니다. 또한
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.