信頼できるウェブ アクティビティを設定する際、デベロッパーは Android Studio は 必要ありません。このガイドは Android Studio 3.3 を使用して作成されました。インストール方法に関するドキュメントをご覧ください。
Trusted Web Activity プロジェクトを作成する
信頼できるウェブ アクティビティを使用する場合、プロジェクトは API 16 以降をターゲットにする必要があります。
Android Studio を開き、[Start a new Android Studio project] をクリックします。
Android Studio で、アクティビティ タイプの選択を求められます。Trusted Web Activity では サポート ライブラリから提供されたアクティビティの場合は、[Add No Activity] を選択して [次へ] をタップします。
次のステップでは、ウィザードでプロジェクトの構成を求められます。こちらが 各フィールドの簡単な説明:
- Name: ネットワークでアプリケーションに使用する名前 Android ランチャー。
- パッケージ名: Google Play Console で Android アプリの Google Play ストアと Android デバイス。詳細については、 ドキュメント パッケージを作成するための要件とベスト プラクティスの詳細 Android アプリの名前。
- [Save location]: Android Studio がプロジェクトを作成するファイル内の場所。 ありません
- Language: プロジェクトで Java や Kotlin コードを記述する必要はありません。 デフォルトとして [Java] を選択します。
- 最小 API レベル: サポート ライブラリには API レベル 16 以上が必要です。 上記のいずれかのバージョンの API 16 を選択します。
Instant Apps は使用しないため、残りのチェックボックスはオフのままにします [Finish] をクリックします。
Trusted Web Activity サポート ライブラリを入手する
プロジェクトに信頼できるウェブ アクティビティ ライブラリを設定するには、アプリケーションを編集する必要があります。
ビルドファイルを使用します。[Project Navigator] の [Gradle Scripts] セクションを確認します。
build.gradle
という 2 つのファイルがあります。わかりにくいかもしれませんが、
括弧内の説明は、正しい説明を特定するのに役立ちます。
ここで探しているファイルは、「Module」モジュールが横に並んでいるものです。 表示されます。
Trusted Web Activities ライブラリでは、
Java 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 Studio に、プロジェクトをもう一度同期するよう求めるメッセージが表示されます。 [Sync Now] リンクをクリックして同期します。
Trusted Web Activity を起動する
Trusted Web Activity を設定するには、 Android アプリ マニフェスト:
[Project Navigator] で、[app] セクションを開き、[
manifest を開き、AndroidManifest.xml
をダブルクリックしてファイルを開きます。
Android Studio では、変更のたびにプロジェクトにアクティビティを追加しないよう 作成された場合、マニフェストは空で、アプリケーション タグのみが含まれます。
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 アプリ マニフェスト: 信頼できるウェブのコンテキストに関連する情報は 2 つあります。 アクティビティ:
meta-data
タグは、信頼できるウェブ アクティビティで開く URL を指示します。乗り換えandroid:value
属性には、開く PWA の URL を指定します。イン この例ではhttps://airhorner.com
です。- 2 番目の
intent-filter
タグでは、信頼できるウェブ アクティビティが Android をインターセプトできます。https://airhorner.com
を開くインテント。android:host
属性data
タグ内では、信頼できるウェブ アクティビティによって開かれるドメインを指している必要があります。
次のセクションでは、Google Chat で デジタル アセットリンク ウェブサイトとアプリの関係性を確認し、URL バーを削除してください。
URL バーを削除する
信頼できるウェブ アクティビティを使用するには、Android アプリと 設定して URL バーを削除するウェブサイトです
この関連付けは次を使用して作成されます: デジタル アセットのリンク 関連付けは、両方の方法で確立する必要があります。 アプリからウェブサイト および ウェブサイトからアプリへ。
ウェブサイト検証をアプリに設定し、Chrome でスキップするように設定できる ウェブサイト間の検証(デバッグを目的としています)。
アプリからウェブサイトへの関連付けを確立する
文字列リソース ファイル app > res > values > strings.xml
を開き、
以下のデジタル アセット リンクに関する文言:
<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
に移動して検索 「root 権限のないデバイスでコマンドラインを有効にする」という項目を探し、設定を変更します。 [有効] を選択してからブラウザを再起動します。 - 次に、ご使用のオペレーティング システムのターミナル アプリケーションで、 Android Debug Bridge インストールし、次のコマンドを実行します。
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"
Chrome を閉じて、Android Studio からアプリを再起動します。「 全画面表示されるはずです。
ウェブサイトからアプリへの関連付けを確立する
デベロッパーは アプリを使用して関連付けを作成します。
- パッケージ名: 最初の情報は、アプリのパッケージ名です。この
は、アプリの作成時に生成されたパッケージ名と同じものです。また、
モジュール
build.gradle
内の Gradle スクリプト >build.gradle (Module: app) であり、applicationId
属性。 - SHA-256 指紋認証: Android アプリに署名するには、 アップロードします。同じ署名がアプリケーションの Google の SHA-256 フィンガープリントにより、ウェブサイトとアプリ間の 指定します。
Android のドキュメントでは、Android Studio を使用して鍵を生成する方法が詳しく説明されています。 キーストアのパス、エイリアス、パスワードをメモしておきます。 次のステップで必要になります。
次を使用して 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
両方の情報を確認できたら、アセットリンク生成ツールにアクセスします。
各フィールドに入力し、[Generate Statement] をクリックします。生成されたステートメントをコピーします
そして、ドメインの URL /.well-known/assetlinks.json
から提供します。
アイコンを作成する
Android Studio で新しいプロジェクトが作成されると、デフォルトのアイコンが表示されます。 デベロッパーは独自のアイコンを作成して、 Android ランチャーで他のアプリからアプリを作成できます。
Android Studio には、Image Asset Studio が含まれています。 あらゆる場面で適切なアイコンを作成するのに必要なツールを アプリケーションのニーズを形成できます。
Android Studio で File > New > Image Asset
に移動し、
Launcher Icons (Adaptative and Legacy)
] をクリックし、ウィザードの手順に沿って操作してください。
アプリケーションのカスタム アイコンを作成します。
署名付き APK を生成する
ドメインに assetlinks
ファイルを配置し、asset_statements
タグを設定する
次は、署名付きアプリを生成します。
このステップも
ドキュメントをご覧ください。
出力 APK は、adb を使用してテストデバイスにインストールできます。
adb install app-release.apk
検証ステップが失敗した場合は、エラーをチェックできる Android Debug Bridge を使用して、OS のターミナルや テストデバイスに接続しました。
adb logcat | grep -e OriginVerifier -e digital_asset_links
生成されたアップロード APK で、アプリを Google Play ストアにアップロードすることができます。
スプラッシュ画面の追加
Chrome 75 以降、信頼できるウェブ アクティビティでスプラッシュ画面がサポートされます。 スプラッシュ画面を設定するには、いくつかの新しい画像ファイルと設定を できます。
必ず Chrome 75 以降にアップデートし、 Trusted Web Activity Support Library の最新バージョン。
スプラッシュ画面の画像の生成
Android デバイスの画面サイズはさまざまです。 ピクセル密度。 スプラッシュ画面がすべてのデバイスで適切に表示されるようにするには、 各ピクセル密度の画像。
ディスプレイ非依存ピクセル(dp または dip)の説明 ここでは説明しませんが、例として、イメージを作成し、 320x320 dp(任意の密度のデバイス画面で 2x2 インチの正方形を表す) これは mdpi 密度で 320x320 ピクセルに相当します。
そこから、他のピクセル密度に必要なサイズを導き出すことができます。以下はリストです ピクセル密度、ベースサイズ(320 x 320 dp)に適用される乗数、 サイズ(ピクセル単位)と、 Android Studio プロジェクト。
密度 | 調整因子 | サイズ | プロジェクトの場所 |
---|---|---|---|
mdpi(ベースライン) | 1.0 倍速 | 320 x 320 ピクセル | /res/drawable-mdpi/ |
ldpi | 0.75 倍速 | 240 x 240 ピクセル | /res/drawable-ldpi/ |
hdpi | 1.5 倍 | 480 x 480 ピクセル | /res/drawable-hdpi/ |
xhdpi | 2.0 倍 | 640 x 640 ピクセル | /res/drawable-xhdpi/ |
xxhdpi | 3.0 倍 | 960x960 ピクセル | /res/drawable-xxhdpi/ |
xxxhdpi | 4.0 倍 | 1,280 x 1,280 ピクセル | /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>
開発者の皆様が Trusted Web を使用して何を作成されるかを楽しみにしています アクティビティ。ご意見やご感想がございましたら、 @ChromiumDev。