2023 年 Android 網頁版新功能

將網路推廣到 Android 平台的原因有很多,例如您可以重複在 Android 應用程式中使用網頁小工具,並將第一方或第三方內容加入平台,甚至將整個網頁應用程式發布到平台上。無論用途為何,Android 都提供多項工具,協助您實現目標。

以下是這些工具的最新更新項目。例如:

  • 改善隱私權並提升大螢幕支援,例如支援 WebView 中的圖片拖曳功能。
  • 自訂分頁現在支援部分自訂分頁。
  • PWA 的整合功能,例如 Trusted Web Activities 中的豐富安裝使用者介面和 Play 結帳 API。

讓我們深入瞭解。

WebView

WebView 是將網頁內容嵌入 Android 應用程式最常用的方式,因為絕大多數 Android 應用程式都會使用 WebView。這是在原生 Android 應用程式體驗中,無縫整合網頁 UI 的絕佳方法。舉例來說,您可以將不同的網頁 UI 嵌入應用程式,例如廣告、小工具,甚至是應用程式內瀏覽器。WebView 最強大的優點之一,就是提供強大的 API,可控制及修改載入的網路內容。WebView 有哪些新功能?

X-Requested-With 標頭

我們先從隱私權和 X-Requested-With 標頭淘汰開始。當使用者安裝及執行使用 WebView 嵌入網站內容的應用程式時,WebView 會在傳送至伺服器的每項要求中加入 X-Requested-With 標頭。這個標頭的值是應用程式的 APK 名稱。這表示每項要求都會針對使用者瀏覽網路內容的情境提供特定資訊,並將應用程式的身分洩露給線上服務。為保護使用者隱私,WebView 團隊開始進行淘汰試驗,從所有 WebView 要求中移除這個標頭。

但如果您的應用程式依賴 X-Requested-With 標頭,建議您使用全新的選用加入 API,選擇性地將要求標頭傳送至特定來源。這表示您可同時享有兩種做法的優點:您可以繼續支援在這個標頭上建構的現有功能,同時確保在所有其他情況下保護使用者隱私。如果您想保留現有行為,也可以申請X-Requested-With Deprecation 來源測試版。

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

WebView 測試

接下來要介紹的是測試。如果您是網頁程式開發人員,且網站從 WebView 接收到大量流量,我們提供以下兩項更新:

  1. WebView 現已支援 Chrome 原始來源測試。你可以透過來源試用程序使用 Chrome 的新功能或實驗功能。在正式推出前,您可以使用這些功能搶先試用。目前,來源試用僅適用於電腦版和行動版 Chrome,但自 Chrome M110 起,也可以透過 WebView 執行來源試用。

  2. 現在可以更輕鬆地安裝 WebView Beta 版。我們強烈建議您使用 WebView Beta 版管道測試網站,確保網站能在日後推出的 WebView 版本中正常運作。如要這樣做,請加入 Google Play 商店的 WebView Beta 版測試計畫,裝置就會自動註冊。

加入 WebView Beta 版計畫的網站螢幕截圖。

支援大螢幕裝置

我們的目標是讓 WebView 在大螢幕裝置上順利運作。WebView 現已支援圖片拖曳功能,舉例來說,在分割畫面檢視模式下,您可以將圖片從 WebView 拖曳至其他應用程式。

將拖曳和放置功能新增至 WebView 非常簡單:只要在 AndroidManifest 中宣告 DropDataProvider 即可。

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

在大型螢幕裝置上,Android U 上的 Chrome 和 WebView 將全面支援在 HTML 文字輸入欄位中手寫文字,並提供輸入手勢來刪除文字或新增空格。所有搭載 One UI 5.1 的 Samsung 裝置 (例如 S23 Ultra) 都已支援手寫功能。針對使用 Android T 的其他裝置,您可以在「開發人員選項」下啟用 HTML 輸入的手寫功能。

Jetpack JavaScript 引擎

有時您可能需要在應用程式中執行 JavaScript,但不必顯示任何網路內容,例如在網頁和行動應用程式之間共用商業邏輯時。為簡化這項作業,我們去年推出了新版 JetPack JavaScript 引擎的 Alpha 版本。這個程式庫會使用 V8 (Chrome 的 JavaScript 引擎),讓應用程式評估 JavaScript 或 WebAssembly 程式碼,而無須建立 WebView 例項。新版 JavaScript 引擎的優點是,它會在不同的程序中執行 JavaScript,因此可在應用程式中以安全且穩定的方式執行 JavaScript。此外,這項引擎所需的資源也比 WebView 例項少。

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);

自訂標籤

採用預設樣式的 Android 自訂分頁。

WebView 非常適合將網頁 UI 整合至應用程式。不過,如果您想讓使用者在應用程式中瀏覽網頁內容,該怎麼做呢?

這是自訂分頁的絕佳用途。這類功能可讓使用者在應用程式中瀏覽網站內容,且安全且使用者友善。其最大優點是使用者不必重新登入喜愛的網站。這是因為這些是使用者共用預設瀏覽器和 Cookie 的例項,且提供瀏覽器支援的所有網路平台功能和 API。

這也表示如果預設瀏覽器是 Chrome,自訂分頁會在 Chrome 中開啟;如果預設瀏覽器是 Firefox,自訂分頁會在 Firefox 中開啟。大多數 Android 的主要瀏覽器都支援自訂分頁;如果預設瀏覽器不支援自訂分頁,系統會改為開啟瀏覽器應用程式。

「自訂分頁」的優點在於,你可以根據應用程式的外觀和風格設定樣式,透過「動作」功能新增自訂互動元素,以及使用自己的工具列。

使用自訂顏色主題和工具列的 Android 自訂分頁。

部分自訂分頁

自訂分頁自訂功能已大幅升級,支援部分自訂分頁。讓使用者在應用程式和網頁之間進行多工處理。在此之前,使用「自訂分頁」時,瀏覽器分頁重疊會覆蓋整個螢幕畫面。您現在可以控制自訂分頁疊加層的高度。如此一來,使用者就能同時與您的應用程式和網頁內容互動。如果您使用者的瀏覽器不支援部分自訂分頁,使用者只會看到支援的全螢幕「自訂分頁」。

只須連線至自訂分頁服務、將工作階段傳遞至 CustomTabsBuilder,然後呼叫 setActivityHeight 即可。

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

YouTube 已成功在直接回應式廣告中推出可調整大小的內嵌自訂分頁。這樣一來,他們就能在不中斷應用程式自然體驗的情況下,實作與廣告和網站內容互動的全新方式。

使用部分自訂分頁的 YouTube 直接回應廣告體驗。

那麼平板電腦和其他大螢幕裝置呢?Chrome 團隊目前正努力打造適用於橫向模式和大螢幕裝置的新版並排顯示自訂分頁功能。只要定義分頁的最大寬度和中斷點,自訂分頁體驗就會自動在底部功能表覆疊和並排體驗之間切換。這項功能已在 Canary 中推出,並將於 2023 年 7 月左右推出。如要試用,請查看 Chromium Custom Tabs 範例應用程式的原始碼。

自訂分頁與主要應用程式內容並排顯示。

評估參與度信號

自訂 Tabs 的第二項重大更新是評估工作階段特定的使用者參與度。如果您的應用程式會定期向使用者顯示含有連結的內容 (例如在新聞動態中),那麼如果您能判斷使用者認為哪些連結有價值,哪些連結沒有價值,豈不美事一樁?方便您決定要優先向使用者顯示哪些連結。

Chrome 團隊已在 Chrome 自訂分頁中新增工作階段專屬指標可見度。除了使用者停留在網頁上的時間長度,您現在還能查看捲動距離、捲動方向,以及網頁內容的整體參與度。

參與信號自 Chrome 114 起提供,且需要 androidx.browser:browser:1.6.0-alpha01 支援程式庫或以上版本。如要進一步瞭解詳情,請參閱參與度信號入門指南。

PWA

PWA 也推出了更新,這是一組技術,可讓您在網路上建構及部署類似應用程式的體驗。

在 Android 上使用 PWA 時,網頁應用程式可供安裝,並會與其他平台應用程式一同顯示在主畫面、啟動器、設定和其他介面上。

PWA 功能是根據網路標準建構,著重於跨平台相容性,讓開發人員只需建構一次網頁應用程式,即可讓使用者在所選裝置上安裝。建立可安裝的網頁應用程式並不代表您沒有或不應提供原生 Android 應用程式,而是將網頁帶入 Android 平台。

以下介紹幾項功能,讓你安裝式網頁應用程式在 Android 裝置上也能輕鬆自在。

我們希望讓使用者能自行安裝自己最重視的網站。首先,將 Service Worker 擷取處理常式移除在 Android 和 Chrome 上安裝的必要條件。此外,如果擷取處理程序為空,Chrome 會略過啟動服務工作站。Chrome 會進行實驗,為使用者擴大安裝權限。請留意這些內容,並提供意見回饋。

服務工作者規定可讓開發人員打造與其他 Android 應用程式一致的使用者體驗。您可以使用這個類別建立頁面,通知使用者無法在離線時使用應用程式。

我們意識到,我們可以減輕開發人員的工作負載,並確保這些應用程式一開始就能提供良好的安裝體驗。因此 Chrome 新增了預設離線體驗,在使用者離線時顯示應用程式圖示的畫面,讓使用者瞭解目前的狀態,而開發人員不必額外處理。

當然,服務工作者 API 仍可用於建構自訂離線體驗,以及實作快取等其他功能來改善效能。

其他可為 Android 平台提供優質網頁應用程式體驗的功能包括更豐富的安裝 UI。只要將 descriptionscreenshots 欄位新增至網頁資訊清單,使用者就能獲得更接近應用程式商店顯示的應用程式安裝體驗。

此外,我們也提供快速鍵。只要新增名為 shortcuts 的陣列,說明使用者在應用程式中經常執行的一系列快速動作,使用者就能長按應用程式圖示來執行這些動作。

使用 Web ShareWeb Share Target API,您的應用程式就能與其他應用程式互動,就像其他平台應用程式一樣。您的應用程式會成為分享工作表中的選項,並可分享及接收相片、文字和其他檔案。

如要進一步瞭解企業如何運用這些技術,歡迎觀看 I/O 大會講座「網路:推動成長的平台」。

受信任的網路活動

您也可以使用受信任的網路活動 (TWA),將網頁帶入 Android 裝置。

TWA 是應用程式中顯示全螢幕第一方網站內容的最佳方式。如果開發人員想要將網路應用程式包裝為 Android 應用程式,或是將網站用於應用程式,TWA 就是理想的解決方案。

請注意,雖然 TWA 聽起來與 PWA 密切相關,但實際上並非如此。可以,您可以使用 TWA 將可安裝的網頁應用程式發布至 Google Play,但也可以在網頁上建構單一活動,並將其納入 Android 應用程式。

使用者瀏覽器會以與瀏覽器中顯示的內容完全相同的方式呈現可信任的網頁活動,唯一的差別是,可信任的網頁活動會以全螢幕模式執行,且不會顯示網址列。也就是說,這些應用程式支援瀏覽器支援的所有網路平台功能和 API。

使用 TWA 包裝網頁應用程式有幾項優點:

發布至 Google Play:讓應用程式可透過 Google Play 進行曝光和發布。使用 Play Billing API 後,開發人員就能管理應用程式中的數位商品銷售,更輕鬆地設定產品、銷售、訂閱項目等。 將通知和地理位置權限委派給 Android 應用程式 (而非網站)。

請參閱這篇文章,進一步瞭解 ContactsDirect 如何使用臺灣版服務為使用者創造優勢,並使轉換率提升三倍。

結論

如您所見,有許多不同的選項可用於將網頁內容嵌入應用程式,而且所有這些選項都會持續改善。