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

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

原文標題：Using Trusted Web Activities

譯者：謝盼

校對者：張卓

Trusted Web Activities 是集成 Web 應用的新方法，你能夠經過基於 Custom Tabs 的協議將 PWA 應用和 Android app 進行集成。

代碼參考：

• TrustedWebUtils Android Support Library API reference
• Sample Trusted Web Activity application

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 商店 了。

查看更多分享，請關注閱文前端團隊公衆號: