原文標題:Using Trusted Web Activities
譯者:謝盼
校對者:張卓
Trusted Web Activities 是整合 Web 應用的新方法,你可以通過基於 Custom Tabs 的協議將 PWA 應用和 Android app 進行整合。
程式碼參考:
Trusted Web Activities 和其他一些 Web 與 APP 整合的方式有所不同:
- Trusted Web Activities 中的內容是受信任的 - APP 及其開啟的網站來自同一個開發者。(這是通過 Digital Asset Links 來驗證的。)
- Trusted Web Activities 來自 Web:它們由使用者的瀏覽器渲染,這與使用者在瀏覽器中看到的東西完全相同,不過 TWA 可以全屏執行。Web 內容應該首先保證在瀏覽器中的可用性。
- Chrome 瀏覽器不依賴於 Android 和你的 APP 進行更新,它在 Android Jelly Bean 也可以使用。這可以減小 APK 包的大小,並確保你可以使用現代的 Web 執行環境。(從 Android Lollipop 開始,WebView 也可以獨立於 Android 進行了更新,但是有大量的使用者使用比 Lollipop 更老的版本。)
- APP 無法直接訪問 Trusted Web activity 中的 Web 內容或其他 Web 狀態,比如 cookie 和 localStorage 。不過,你可以通過在 URL 中傳遞資料(比如通過 query parameters,自定義 HTTP 頭和 intent URIs 。
- Web 和 Native 之間的跳轉是在 Activities 之間進行的。APP 的每個 Activity(即頁面)要麼由 Web 提供,要麼由 Android Activity 提供。
為了便於測試,目前在 Trusted Web activities 中對開啟的內容沒有要求。但是,Trusted Web activities 可能也需要 Add to Home Screen 許可權。您可以使用 Lighthouse 的 "user can be prompted to Add to Home screen" 審查來稽核這些網站許可權 。
如果使用者的 Chrome 版本不支援 Trusted Web activities,Chrome 將展示基於 Custom Tab 的簡單工具欄。其他瀏覽器也可以實現 Trusted Web activities 協議。雖然 APP 可以決定開啟哪種瀏覽器,但我們建議使用與 Custom Tabs 相同的策略:使用使用者的預設瀏覽器,只要該瀏覽器提供所需的功能即可。
入門
設定 Trusted Web Activity(TWA)不要求開發人員編寫 Java 程式碼,但需要 Android Studio。本指南基於 Android Studio 3.3。檢視 安裝文件。
建立 Trusted Web Activity 專案
使用 Trusted Web Activities 時,專案必須為 API 16 或更高版本。
開啟 Android Studio,然後點選 Start a new Android Studio project。
Android Studio 將提示您選擇 Activity 型別。由於 TWA 使用 support 庫提供的 Activity,因此選擇 Add No Activity 並點選 Next。
下一步,嚮導將提示專案的配置。以下是每個欄位的簡短描述:
- Name: Android 桌面 上的應用程式名稱 。
- Package Name: Play 商店和 Android 裝置上 Android 應用程式的唯一識別符號。 有關為 Android 應用程式建立程式包名稱的要求和最佳實踐的請檢視 文件。
- Save location: Android Studio 將在電腦中建立專案的目錄。
- Language: 該專案不需要編寫任何 Java 或 Kotlin 程式碼。選擇 Java 作為預設值。
- Minimum API Level: support 庫至少需要 API 16。選擇 API 16 以上的版本。
忽略其他選項,然後點選 Finish。
獲取 TWA Support Library
要在專案中設定 TWA 庫,您需要編輯幾個檔案。在 Project Navigator 查詢 Gradle Scripts 部分。
第一個檔案是 Project 級 build.gradle
。
新增 Jitpack 配置到 allprojects
中:
allprojects {
repositories {
google()
jcenter()
maven { url "https://jitpack.io" }
}
}
複製程式碼
Android Studio 將提示 Sync 專案。點選 Sync Now。
我們需要更改的第二個檔案是 Module 級的 build.gradle
。
Trusted Web Activities 庫使用 Java 8 功能 ,首先啟用 Java 8。在 android
下新增 compileOptions
配置 ,如下所示:
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
複製程式碼
下一步將 TWA Support 庫新增到專案中。向 dependencies
新增新的依賴:
dependencies {
implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3'
}
複製程式碼
點選 Sync Now 來同步專案。
新增 TWA Activity
通過編輯 Android App Manifest 來實現設定 TWA 活動 。
在 Project Navigator 上,展開 app 部分,然後展開 manifests 並雙擊 AndroidManifest.xml
開啟檔案。
因為我們在建立專案時沒有新增任何 Activity,因此 manifest
為空且僅包含 application
標記。
通過在 application
標記中插入 activity
標記來 新增 TWA 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="android.support.customtabs.trusted.LauncherActivity">
<!-- Edit android:value to change the url opened by the TWA -->
<meta-data
android:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="https://airhorner.com" />
<!-- This intent-filter adds the TWA 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 TWA 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 App Manifest。Trusted Web Activities 有兩個相關資訊:
meta-data
標記告訴 TWA 活動開啟哪個 URL 。修改android:value
為你要開啟的 PWA 頁面的 URL。示例為https://airhorner.com
。- 在第二個
intent-filter
標籤允許 TWA 攔截 Android Intents 開啟https://airhorner.com
。該android:host
內部屬性data
標籤必須指向被 TWA 開啟的 網址。
下一節將介紹如何設定 Digital AssetLinks 以驗證網站與應用之間的關係,並移除 URL 欄。
移除 URL 欄
Trusted Web Activities 需要在 Android 應用程式和網站之間建立關聯以刪除 URL 欄。
此關聯是通過 Digital Asset Links 建立的, 必須用兩種方式建立關聯:從 APP 連結到網站 , 從網站連結到 APP。
也可以將 APP 設定為網站驗證,並設定 Chrome 以跳過網站到 APP 驗證,以進行除錯。
建立從 APP 到網站的關聯
開啟 string 資原始檔 app > res > values > strings.xml
並在下面新增 Digital AssetLinks 語句:
<resources>
<string name="app_name">AirHorner TWA</string>
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://airhorner.com\"}
}]
</string>
</resources>
複製程式碼
更改 site
屬性的內容以匹配 TWA 開啟的 scheme 和 domain。
回到 AndroidManifest.xml
檔案,通過在 application
標記新增新 meta-data
標記連結到該 statements :
<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 APP 到網站的關聯。我們可以不建立網站到 APP 的驗證來除錯。
以下是在開發裝置上測試它的方法:
啟用除錯模式
- 在開發裝置上開啟 Chrome,導航到
chrome://flags
,在非 root 裝置上搜尋名為 Enable command line 的專案,然後將其更改為 ENABLED,然後重新啟動瀏覽器。 - 接下來,在終端上,使用 Android Debug Bridge (隨著 Android Studio一起安裝),並執行以下命令:
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"
複製程式碼
關閉 Chrome 並從 Android Studio 重新啟動您的應用程式。現在應該以全屏顯示應用程式。
建立從網站到APP的關聯
開發人員需要從 APP 拿到2條資訊才能建立關聯:
- Package Name: 第一個資訊是 APP 的包名稱。這與建立 APP 時生成的包名稱相同。可以在 Gradle Scripts > build.gradle (Module: app) 中找到
applicationId
的值。 - SHA-256 Fingerprint: 必須簽名 Android 應用程式才能上傳到 Play 商店。相同的簽名用於通過上傳金鑰的 SHA-256 在網站和 APP 之間建立連線。
Android文件 詳細說明了如何使用Android Studio生成金鑰。請記下金鑰的路徑、別名和密碼,因為下一步需要用到。
使用 keytool 提取 SHA-256,使用以下命令:
keytool -list -v -keystore -alias -storepass -keypass
複製程式碼
SHA-256 列印在 Certificate 中。下面是個示例輸出:
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
目錄中。
打包
assetlinks
存在您的網站中,asset_statements
在 Android APP 中配置完成後,下一步就是生成簽名的 APP。請檢視 文件。
可以使用 adb 將 APK 安裝到測試裝置中:
adb install app-release.apk
複製程式碼
如果驗證失敗,則可以使用 adb 從連線裝置並電腦終端檢視錯誤訊息。
adb logcat | grep -e OriginVerifier -e digital_asset_links
複製程式碼
生成上傳 APK 後,就 可以將應用上傳到 Play 商店 了。