2023 年 Android 網頁版新功能

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

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

  • 改善隱私權並提升大螢幕支援,例如支援 WebView 中的圖片拖曳功能。
  • 自訂分頁現在支援部分自訂分頁。
  • PWA 的整合功能,例如受信任的網路活動中更豐富的安裝 UI 和 Play Billing API。

現在就來一探究竟並瞭解詳情。

WebView

WebView 是將網頁內容嵌入 Android 應用程式中最常用的方法,因為絕大多數 Android 應用程式都使用 WebView。這是完美整合網頁 UI 與原生 Android 應用程式體驗的好方法。舉例來說,您可以在應用程式中嵌入不同的網頁 UI,例如廣告、小工具,甚至是應用程式內瀏覽器。WebView 最大的優勢之一,就是能控制及修改正在載入的網路內容。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 版中推出,並將於 2003 年 7 月左右推出。如要試用這項功能,請查看 Chromium 自訂分頁範例應用程式的原始碼。

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

評估參與度信號

「自訂分頁」的第二項重大更新是評估個別工作階段的使用者參與度。如果應用程式會定期向使用者顯示內容,包括新聞動態消息的連結,那麼只要能夠辨別使用者認為哪些連結有價值,哪些連結不是實用連結,該有多好?方便您決定要優先向使用者顯示哪些連結。

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

從 Chrome 114 開始提供參與信號功能,並需要 androidx.browser:browser:1.6.0-alpha01 支援資料庫或更高版本才能使用。詳情請參閱參與度信號入門指南。

PWA

此外,PWA 亦提供更新,而 PWA 皆採用一組技術,讓您打造在網路上建構和部署的類似應用程式體驗。

只要在 Android 上使用 PWA,就能安裝網頁應用程式;這個應用程式會隨著其他平台應用程式、主畫面、啟動器、設定和其他介面一起安裝。

PWA 功能是以網路標準為基礎。他們著重於跨平台相容性,因此開發人員可使用工具一次建構一次網頁應用程式,使用者就能在各種裝置上安裝這個應用程式。建立可安裝的網頁應用程式並不代表您沒有或不應提供原生 Android 應用程式,而是將網頁帶入 Android 平台。

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

我們希望讓使用者能自行安裝自己最重視的網站。首先,將 Service Worker 擷取處理常式移除在 Android 和 Chrome 上安裝的必要條件。此外,如果擷取處理常式為空白,Chrome 就會略過啟動 Service Worker。Chrome 將執行實驗,擴大使用者安裝範圍。請留意這些地方,並提供意見回饋。

Service Worker 規定,可讓開發人員打造與其他 Android 應用程式一致的使用者體驗。可用來建立頁面,告知使用者無法在離線時使用應用程式。

我們瞭解到可以減輕開發人員的工作負擔,確保應用程式從一開始就能提供優質的安裝體驗。因此,Chrome 新增了預設離線服務,並顯示應用程式圖示的畫面,讓使用者知道自己處於離線狀態,不需要開發人員進行額外處理。

當然,Service Worker API 仍可用於建立自訂離線體驗,以及實作快取等其他功能,藉此改善效能。

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

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

有了 Web ShareWeb Share Target API,您的應用程式可以與其他應用程式互動,就像任何其他平台應用程式一樣。應用程式會成為共用工作表中的選項,可讓您分享及接收相片、簡訊和其他檔案。

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

受信任的網路活動

將網路引進 Android 的另一種方法就是使用受信任的網路活動 (TWA)

TWA 是在應用程式中顯示全螢幕第一方網頁內容的最佳方式。如果開發人員想將網頁應用程式納入 Android 應用程式,或將網站納入 Android 應用程式,這項工具就是理想的解決方案。

請注意,TWA 聽起來似乎與 PWA 相關,但並非如此。可以。只要使用 TWA,您即可將可安裝的網頁應用程式發布到 Google Play,但也可以在網路上建立單一活動,並加入您的 Android 應用程式。

「受信任的網路活動」由使用者瀏覽器顯示的方式,與使用者在瀏覽器中看到的相同,只有以全螢幕執行,而且不會顯示網址列。也就是說,支援所有網路平台功能和 API 皆支援其背後的瀏覽器所支援。

使用 TWA 納入網頁應用程式的幾個優點如下:

將應用程式發布到 Google Play,讓您的應用程式存取 Google Play 的顯示與發行設定。 開發人員可以存取 Play Billing API,以便管理應用程式中的數位商品銷售,從而更輕鬆地設定產品、銷售、訂閱項目等。 將通知和地理位置權限委派給 Android 應用程式 (而非網站)。

請參閱這篇文章,進一步瞭解 ContactsDirect 如何使用臺灣版服務為使用者帶來好處,轉換率卻增加三倍。

結論

如您所見,將網路內容嵌入應用程式的選項有很多種,我們持續改良這些選項。