Рекомендации для веб-приложений

Разработка веб-страниц и приложений для мобильных устройств сопряжена с иными трудностями по сравнению с разработкой веб-страниц для настольных веб-браузеров. Следующие рекомендации помогут вам создать наиболее эффективное веб-приложение для Android и других мобильных устройств.

  1. Перенаправляйте мобильные устройства на специальную мобильную версию вашего сайта. Существует несколько способов сделать это с помощью перенаправлений на стороне сервера. Один из распространенных методов — это «проверка» строки User Agent, предоставляемой веб-браузером. Чтобы определить, следует ли отображать мобильную версию вашего сайта, найдите строку «mobile» в User Agent.
  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. Отключите автоматическую загрузку значков favicon, если они вам не нужны. По умолчанию WebView автоматически загружает значок favicon при каждом посещении сайта во время навигации. WebView хранит две копии каждого загруженного значка favicon (одну в Java и одну в нативной памяти), поэтому отключение загрузки значков favicon экономит память (примерно 8 КБ на экземпляр WebView ) и снижает потребление трафика. Если ваше приложение не использует или не отображает значки favicon, используйте WebSettingsCompat.setDownloadFaviconsEnabled() из библиотеки Jetpack Webkit , чтобы отключить автоматическую загрузку:

    Котлин 

    // 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. Управляйте сохраненным состоянием и избегайте превышения лимитов транзакций. Если вы сохраняете состояние WebView во время событий жизненного цикла с помощью saveState(Bundle) , установите ограничения на размер полезной нагрузки с помощью WebViewCompat.saveState() чтобы избежать превышения лимита 1 МБ savedInstanceState в Android. Для получения дополнительной информации см. раздел «Эффективное управление состоянием WebView» .

Дополнительные ресурсы