網頁應用程式最佳做法

與開發電腦版網頁瀏覽器適用的網頁相比，開發行動裝置適用的網頁和應用程式面臨的挑戰不同。下列做法可協助您為 Android 和其他行動裝置提供最有效的網頁應用程式。

  1. 將行動裝置重新導向至專用的行動版網站。您可以透過幾種方式，使用伺服器端重新導向來完成這項作業。常見的方法是「嗅探」網路瀏覽器提供的使用者代理程式字串。如要判斷是否要提供網站的行動版，請在使用者代理程式中尋找「mobile」字串。
  2. 在行動裝置上使用 HTML5。HTML5 是行動網站最常用的標記語言。 這項標準鼓勵開發人員優先開發行動版網站，確保網站能在各種裝置上正常運作。與先前的網頁語言不同，HTML5 使用較簡單的 <DOCTYPE> 和 charset 宣告：
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. 使用可視區域中繼資料，正確調整網頁大小。在文件中 <head>，提供中繼資料，指定瀏覽器要如何算繪網頁的可視區域。舉例來說，可視區域中繼資料可以指定瀏覽器可視區域的高度和寬度、網頁的初始縮放比例，以及目標螢幕密度。

    以下範例說明如何設定檢視區中繼資料：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    如要進一步瞭解如何為 Android 裝置使用可視區域中繼資料，請參閱「在網頁應用程式中支援不同螢幕」。

  4. 使用垂直線性版面配置。避免使用者在瀏覽網頁時需要左右捲動。使用者可以更輕鬆地上下捲動，網頁也會變得更簡潔。
  5. 將版面配置的高度和寬度設為 match_parent。將 WebView 物件的高度和寬度設為 match_parent，確保應用程式的檢視區塊大小正確無誤。我們不建議將高度設為 wrap_content，因為這樣會導致大小不正確。同樣地，系統不支援將版面配置寬度設為 wrap_content，否則 WebView 會改用上層元素的寬度。因此，請務必確認 WebView 物件的上層布局物件的高度和寬度均未設為 wrap_content。
  6. 避免多次要求檔案。行動裝置的連線速度通常比桌上型電腦慢，因此請盡可能加快載入網頁速度。如要加快速度，其中一個方法是避免在 <head> 中載入額外檔案，例如樣式表和指令碼檔案。此外，建議您使用 Google 的 PageSpeed Insights 進行行動分析，取得應用程式專屬的詳細最佳化建議。
  7. 如不需要，請停用自動下載網站圖示功能。 根據預設，WebView 會在瀏覽網站時自動下載網站圖示。WebView 會保留每個下載的網站圖示副本 (一個在 Java 中，另一個在原生記憶體中)，因此停用網站圖示下載功能可節省記憶體 (每個 WebView 例項約 8 KB)，並減少頻寬消耗量。如果應用程式不會使用或顯示網站圖示，請使用 Jetpack Webkit 程式庫中的 WebSettingsCompat.setDownloadFaviconsEnabled() 停用自動下載功能：

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. 管理已儲存的狀態，避免交易限制。如果您在生命週期事件期間使用 saveState(Bundle) 儲存 WebView 狀態，請使用 WebViewCompat.saveState() 強制執行酬載大小限制，以免超過 Android 的 1MB savedInstanceState 限制。詳情請參閱「有效管理 WebView 狀態」。
  9. 使用推測載入 API 最佳化網路連線和網頁載入。 如要減少導覽延遲，請使用 Jetpack Webkit API 預先準備網路連線和內容。呼叫 Profile.addQuicHints 預先填入透過 QUIC 的 HTTP/3 支援，讓 WebView 可以在第一次連線時立即使用 QUIC，並使用 Profile.preconnect 預先暖機網路插座。如果知道或可能知道到達網頁網址，請使用 Profile.prefetchUrlAsync 或 WebViewCompat.prerenderUrlAsync 在背景擷取或算繪網頁。詳情請參閱「在 WebView 中推測載入」。
  10. 如不需要，請停用自動下載網站圖示功能。 根據預設，WebView 會在瀏覽網站時自動下載網站圖示。WebView 會保留每個下載的網站圖示副本 (一個在 Java 中，另一個在原生記憶體中)，因此停用網站圖示下載功能可節省記憶體 (每個 WebView 例項約 8 KB)，並減少頻寬消耗量。如果應用程式不會使用或顯示網站圖示，請使用 Jetpack Webkit 程式庫中的 WebSettingsCompat.setDownloadFaviconsEnabled() 停用自動下載功能：

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. 管理已儲存的狀態，避免交易限制。如果您在生命週期事件期間使用 saveState(Bundle) 儲存 WebView 狀態，請使用 WebViewCompat.saveState() 強制執行酬載大小限制，以免超過 Android 的 1MB savedInstanceState 限制。詳情請參閱「有效管理 WebView 狀態」。

其他資源