网络应用最佳实践

与针对桌面版网络浏览器开发网页相比，针对移动设备开发网页和应用需要应对一系列不同的挑战。以下做法可帮助您面向 Android 设备和其他移动设备提供最富有成效的 Web 应用。

  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 设备使用视口元数据，请参阅在 Web 应用中支持不同的屏幕。

  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 可预先填充 HTTP/3 over QUIC 支持，以便 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 状态。

其他资源