【譯】使用 Google TWA 技術將 PWA 打包成 Android App

閱文前端團隊發表於2019-06-03
GoAndroidAPP

原文地址：developers.google.com/web/updates…

原文標題：Using Trusted Web Activities

譯者：謝盼

校對者：張卓

Trusted Web Activities 是整合 Web 應用的新方法，你可以通過基於 Custom Tabs 的協議將 PWA 應用和 Android app 進行整合。

程式碼參考：

Trusted Web Activities 和其他一些 Web 與 APP 整合的方式有所不同：

  1. Trusted Web Activities 中的內容是受信任的 - APP 及其開啟的網站來自同一個開發者。（這是通過 Digital Asset Links 來驗證的。）
  2. Trusted Web Activities 來自 Web：它們由使用者的瀏覽器渲染，這與使用者在瀏覽器中看到的東西完全相同，不過 TWA 可以全屏執行。Web 內容應該首先保證在瀏覽器中的可用性。
  3. Chrome 瀏覽器不依賴於 Android 和你的 APP 進行更新，它在 Android Jelly Bean 也可以使用。這可以減小 APK 包的大小，並確保你可以使用現代的 Web 執行環境。（從 Android Lollipop 開始，WebView 也可以獨立於 Android 進行了更新，但是有大量的使用者使用比 Lollipop 更老的版本。）
  4. APP 無法直接訪問 Trusted Web activity 中的 Web 內容或其他 Web 狀態，比如 cookie 和 localStorage 。不過，你可以通過在 URL 中傳遞資料（比如通過 query parameters，自定義 HTTP 頭和 intent URIs 。
  5. 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 有兩個相關資訊：

  1. meta-data 標記告訴 TWA 活動開啟哪個 URL 。修改 android:value 為你要開啟的 PWA 頁面的 URL。示例為 https://airhorner.com。
  2. 在第二個 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 的驗證來除錯。

以下是在開發裝置上測試它的方法：

啟用除錯模式

  1. 在開發裝置上開啟 Chrome，導航到 chrome://flags，在非 root 裝置上搜尋名為 Enable command line 的專案，然後將其更改為 ENABLED，然後重新啟動瀏覽器。
  2. 接下來，在終端上，使用 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 商店 了。

檢視更多分享，請關注閱文前端團隊公眾號:

【譯】使用 Google TWA 技術將 PWA 打包成 Android App

相關文章