谷歌新發布的 TWA：讓你的 PWA 進入應用商店

摘要： PWA(Progressive Web App) 可以使得 Web 站點擁有類似 Native App 的使用體驗，雖然已經推出一段時間，但目前來看，PWA 離真正的 Native App 還有一個重要的差別，那就是進入應用商店。Trusted Web Activity 的釋出，使得將 PWA...

PWA(Progressive Web App) 可以使得 Web 站點擁有類似 Native App 的使用體驗，雖然已經推出一段時間，但目前來看，PWA 離真正的 Native App 還有一個重要的差別，那就是進入應用商店。Trusted Web Activity 的釋出，使得將 PWA 站點打包為 Native App 放入應用商店有了更好的體驗。為什麼要把一個 Web 站點放入應用商店呢？如何做呢？

為什麼要把一個 Web 站點放入應用商店？

Web 站點本身可以做到敏捷開發，快速更新迭代，而將 PWA 打包為 Native App 放入應用商店，則擁有了以下便利：

• 使用者可以在應用商店中搜索安裝一個 PWA 應用。

• 將現有的 Native App 遷移為一個 PWA 應用，保留已有的 Native App 使用者。

• 擁有例如桌面 Widget、應用快捷方式、後臺 service 等功能。

• 靠應用下載來獲利。

總的來說，把一個 Web 站點放入應用商店的目的，其實就是讓他“更像”一個移動應用，擁有更好的體驗。儘管 Web 前端工程師們都相信 Web 就是未來，但不得不承認在移動端，Native App 的各項體驗確實是優於 Web 站點的，使用者也已經有了使用 Native App 的習慣。

等一下，這不就是 Hybrid 應用麼？

呃，其實本質上說，是這樣的。將 PWA 打包成一個 Native App，本質上他就是一個 Hybrid 應用了，區別在於：

Hybrid 應用是使用 Web 技術擴充套件 Native App，而將 PWA 打包成一個 Native App，是使用 Native 技術擴充套件 Web App。

作為 Web 開發者，能使用 Web 進行開發的功能特性，我們都希望使用 Web 來開發。當前我們進行的 Hybrid 應用開發，是使用一個 Webview 嵌入 Web 站點，而 Webview 並不是一個全功能的 Web 環境，由於 App 內的安全模型等原因，Webview 只有有限的 Web API 支援。Trusted Web Activity 可以讓們充分利用現有 Web API，專注於 Web 開發。

根據目前提供的機制，一鍵式的打包工具是很容易實現的，工具完善以後 Web 開發者也可以使用工具將自己的 PWA 進行打包，不需要具備 Native 開發相關知識。

將 Web 站點嵌入 Native App 中的方式

下面我們來對現有的將 Web 站點植入 Native App 的方式進行對比。

Webview

Webview 是現在最常用的混合應用開發方式，我們平時進行的 Hybrid App 開發就是採用的這種方式，他的優點是：

1. 展示大小可以自由控制，可以全螢幕展示，也可以只展示在一定螢幕空間內。

2. 可方便的與 NA 進行互動。

3. 可以使用 Service workers。

但也有很大的缺點：

1.Wevbiew 是一個獨立的安全沙盒，這意味著 cookie、storage 都不會與其他瀏覽器中的頁面共享。

2. 在低版本的安卓系統中，webivew 是不會隨著 Chrome 進行更新的。

3. 最後也是最重要的一點，Webview 中的 API 支援是有限的，例如以下 API 在 Webview 不被支援：

• web push notifications

• background sync

• Chrome form autofill

• Media Source Extensions (MSE)

• Sharing API

由於 API 的限制，我們沒辦法在 Webview 中充分利用 Web 平臺的功能。同時，如果使用者使用其他瀏覽器登陸了我們的 PWA 應用，之後下載了 Native 版本，由於 cookie 等內容不能同步，體驗做不到流暢一致。

Chrome Custom Tabs

為了解決 Webview 的這些問題，Chrome 團隊推出了 Chrome Custom Tabs ，它也是用來在 Native App 中展示 Web 頁面的元件，相比 Webview 它：

• 接近全螢幕顯示；

• 共用 cookies，storage 和 passwords；

• 總是會隨著 Chrome 更新；

• Service workers；

• 全功能的 Web API。

這個元件解決了 Webview 的很多問題，但它有一個關鍵的限制，就是會 在頂部有個位址列顯示 。為什麼要這麼做呢？因為 Chrome Custom Tabs 可能開啟任何 Web 頁面，如果全屏顯示，會給使用者錯覺認為 Chrome Custom Tabs 開啟的 Web 頁面是當前 Native App 提供的，造成安全問題。位址列提示了使用者當前是像瀏覽器中一樣在瀏覽一個頁面。

Trusted Web Activity

我們希望的是更接近 Native App 的使用體驗，而 Chrome Custom Tabs 雖然避免了 Webview 的缺點，但是由於有位址列，還是一個瀏覽器形式的體驗。這時候就需要用到 Trusted Web Activity 了。TWA(Trusted Web Activity) 是在 Chrome Custom Tabs 的基礎上，使用 Digital AssetLinks 來對 Web 內容進行鑑權，限制 TWA 中展示的 Web 內容與 Native App 為相同的作者，保證了安全性。它的優點：

• 基於 Custom Tabs，會隨 Chrome 自動更新；

• 全螢幕，不會顯示位址列。

如何使用 TWA 打包我的 PWA 站點？

終於，我們說到了如何使用 TWA 打包 PWA 站點。想要打包 PWA，首先我們需要一個 PWA 站點（廢話），也就是說我們的站點需要滿足 PWA 規範，例如 https 等。可以使用 Lighthouse 來對站點進行 PWA 特性檢測。

有了 PWA 站點，我們就可以著手進行打包了，這裡我不會講細節的操作方法（Google 的官方指南寫的很清楚），而是跟大家說一下我們需要做哪些工作：

1. 具有安卓開發環境，下載安裝 Android Studio；

2.build.gradle 中新增 TWA 元件等依賴（com.github.GoogleChrome.custom-tabs-client）；

3. 新增一個 android.support.customtabs.trusted.LauncherActivity 來載入我們的頁面，並作為應用的啟動 Activity：

 複製程式碼

<activityandroid:name="android.support.customtabs.trusted.LauncherActivity"
android:label="@string/app_name">
<meta-dataandroid:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="https://meixg.cn"/>

<intent-filter>
<actionandroid:name="android.intent.action.MAIN"/>
<categoryandroid:name="android.intent.category.LAUNCHER"/>
</intent-filter>

<intent-filter>
<actionandroid:name="android.intent.action.VIEW"/>
<categoryandroid:name="android.intent.category.DEFAULT"/>
<categoryandroid:name="android.intent.category.BROWSABLE"/>
<dataandroid:scheme="https"
android:host="meixg.cn"/>
</intent-filter>
</activity>

到這裡，我們成功配置了一個 Chrome Custom Tabs，如果我們開啟，會發現頂部有個位址列。接下來我們需要 Digital AssetLinks 來建立 Web 站點與 Native App 的雙向認證。具體操作官方文件中很詳細，簡單來說就是：

4. 在 APP 中寫入需認證的站點地址。在站點地址根目錄下部署 json 檔案放入 Native App 簽名。

在使用 Digital Asset Links 建立了雙向認證後，再開啟 App，會發現位址列沒有了：

可以看到其實自動化使用 TWA 建立 PWA 站點的 Native App 不是一件困難的事情，相信很快會有相關工具出來。

示例 Native App

這裡我將自己的部落格使用 TWA 進行了打包，感興趣可以下載後安裝檢視效果。

http://cdn.meixg.cn/meixg.apk

一些其他問題

1. 放入 Google Store 的條件

除了符合 PWA 規範，如果想要放入谷歌應用商店，需要 Web 內容也符合谷歌商店的規範。國內的應用商店是什麼要求，還不清楚。

2. 可否自由定義 TWA 在螢幕中的展示大小？

TWA 是一個安卓中的 Activity，瞭解安卓開發的同學可能知道，Activity 是隻能佔滿整個螢幕的。 Web 和 Native 之間的的切換是在 Activity 之間的 ，目前還不知道 Web 與 Native 之間如何進行互動。

3. 如果 Chrome 版本過低？或者就沒有 Chrome？

按照文件中的寫法，在不支援的 Chrome 版本中，會回退到使用 CustomTabs，如果沒有支援 CustomTabs 的瀏覽器，則會使用瀏覽器開啟（猜測直接使用的 Intent ？）。不過，開發者也可以自己來檢查 CustomTabs 的可用性，來做相應的操作。

4. 對安卓版本有沒有要求？

同樣根據文件，TWA 需要 Android KitKat 或更新的作業系統版本，這些版本目前覆蓋了 95% 的安卓手機裝置。

5. 如果解除安裝了 Native App？

應用解除安裝後，會有彈窗提示使用者資料並沒有被清除，因為是和 Chrome 共用的，需要清除 Chrome 中的資料才能真正清除掉所有資料。