2023 年 Android 網頁版新功能

開發人員基於許多理由將網路導入 Android:可能會在 Android 應用程式中重複使用網頁小工具,並加入第一方或第三方內容,甚至將整個網頁應用程式帶入平台。無論用途為何,Android 都提供多種工具。

以下是這些工具的最新消息,例如:

  • 改善隱私權並進一步支援大螢幕,例如支援 WebView 中的圖片拖曳功能。
  • 自訂分頁現在支援部分自訂分頁。
  • 整合 PWA 的功能,例如Trusted Web Activities 中的更豐富的安裝 UI 和 Play Billing API。

現在就來深入瞭解相關資訊吧!

WebView

大多數的 Android 應用程式都使用 WebView,因此 WebView 是最常用來在 Android 應用程式中嵌入網頁內容的方法。這是在原生 Android 應用程式體驗中完美整合網頁 UI 的好方法。舉例來說,您可以在應用程式中嵌入不同的網頁 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 測試

下一個主題是測試如果您是網頁程式開發人員,而您的網站從 WebViews 獲得大量流量,則需要進行以下兩項更新:

  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 Engine

有時您可能需要在應用程式中執行 JavaScript,而且不應顯示任何網路內容,例如在網路和行動應用程式中分享商業邏輯時。為了方便起見,我們在去年推出了新版 JetPack JavaScript 引擎的 Alpha 版。這個程式庫使用 Chrome 的 JavaScript 引擎 V8,可讓應用程式評估 JavaScript 或 WebAssembly 程式碼,不必建立 WebView 執行個體。新版 JavaScript 引擎的好處是它會以不同的程序執行 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「Custom」分頁。

WebView 很適合用來將 Web 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 DirectResponse 廣告體驗。

那麼平板電腦和其他大螢幕裝置呢?Chrome 團隊目前正在開發全新的並排顯示「自訂分頁」體驗,適用於橫向模式和大螢幕裝置。定義分頁寬度上限及中斷點後,自訂分頁功能就會自動在底部功能表重疊和並排體驗之間切換。這項功能已在 Canary 中推出,並將於 2003 年 7 月左右推出。如果想試用看看,請查看 Chromium 自訂分頁範例應用程式的原始碼。

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

評估參與度信號

「自訂分頁」的第二項重大更新是評估特定工作階段的使用者參與度。如果您的應用程式會定期向使用者顯示內容,包括在新聞動態消息中的連結,那麼只要能判斷使用者認為哪些連結有價值,哪些連結就不適合?當您需要優先向使用者顯示哪些連結時,這項資訊非常有用。

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

參與信號自 Chrome 114 以上版本開始提供,且必須搭配 androidx.browser:browser:1.6.0-alpha01 支援資料庫才能使用。詳情請參閱參與度信號入門指南。

PWA

此外,PWA 也提供更新,這套技術可讓您打造與應用程式相似的體驗,也能在網路上建構及部署。

使用 PWA 時,您的網頁應用程式可能可以安裝:透過其他平台應用程式、主畫面、啟動器、設定和其他途徑,

PWA 功能是根據網路標準建構而成,因此著重在跨平台相容性,讓開發人員取得建構網頁應用程式一次的工具,並在使用者所選的裝置上安裝應用程式。建構可安裝的網頁應用程式並不代表你不能或不應建構原生 Android 應用程式,而是將網路帶入 Android 的另一種選擇。

來看看幾項功能,方便你在 Android 中安裝可安裝的網頁應用程式。

我們希望讓使用者能夠安裝自己最重視的網站。第一步是移除在 Android 和 Chrome 上安裝 Service Worker 擷取處理常式。此外,如果擷取處理常式為空白,Chrome 也會略過服務工作處理程序。Chrome 將進行實驗,擴大使用者安裝範圍。請留意這些情形,並提供意見回饋。

開發人員必須遵守 Service Worker 規定,才能打造與其他 Android 應用程式一致的使用者體驗。可用於建立頁面,通知使用者離線時無法使用應用程式。

我們發現我們可以減輕開發人員的工作負擔,確保這些應用程式在一開始就能提供良好的安裝體驗。因此,Chrome 新增了預設離線體驗,使用者不需執行其他操作,系統就會在畫面中顯示應用程式圖示的畫面,讓使用者知道自己已離線。

當然,Service Worker API 仍可用來建構自訂的離線體驗,並導入快取等其他功能來改善效能。

還有其他為 Android 帶來優質網頁應用程式體驗的功能,例如更豐富的安裝頁面 UI。將 descriptionscreenshots 欄位加入網頁資訊清單,使用者可獲得的安裝體驗,就更接近應用程式商店顯示的應用程式說明資訊。

我們也提供了快速鍵。新增名為 shortcuts 的陣列 (用於描述使用者經常在應用程式中執行的一組快速操作),使用者只要長按應用程式圖示即可存取這些動作。

只要使用網頁分享 API 和網路分享目標 API API,您的應用程式即可與其他應用程式互動,就像其他平台應用程式一樣。您的應用程式將成為共用工作表中的選項,並且可以分享與接收相片、簡訊和其他檔案。

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

受信任的網路活動

您也可以使用受信任網路活動 (TWA),將網路推送至 Android 裝置。

如要在應用程式中顯示全螢幕第一方網路內容,

請注意,TWA 聽起來與 PWA 密切相關,但與 PWA 無關。可以。透過 TWA,您可以將可安裝的網頁應用程式發布到 Google Play,但您也可以只在網路上建立單一活動,再將這個活動加到 Android 應用程式。

受信任的網路活動顯示的內容,與使用者在瀏覽器中看到的內容相同,差別只在於使用者以全螢幕執行,不會顯示網址列。代表其支援所有網路平台功能和 API,且提供該工具的瀏覽器提供支援。

使用 TWA 包裝網頁應用程式有哪些好處:

發布至 Google Play,讓您的應用程式存取 Google Play 的瀏覽權限和發行設定。 獲得 Play Billing API 的存取權,可讓開發人員管理應用程式中的數位商品銷售情況,更輕鬆地設定產品、銷售、訂閱等。 將通知和地理位置存取權委派給 Android 應用程式,而非透過網站。

查看這篇文章,進一步瞭解 ContactsDirect 如何運用臺灣消費者的策略,進而使轉換率增加至原先的三倍。

結論

如您所見,有很多不同的選項可將網頁內容嵌入應用程式,而這些選項都會不斷得到改善。