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

Разработка веб-страниц и приложений для мобильных устройств сопряжена с другими проблемами по сравнению с разработкой веб-страниц для настольных веб-браузеров. Следующие рекомендации помогут вам создать наиболее эффективное веб-приложение для 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, а другую в нативной памяти), поэтому отключение скачивания значков сайтов экономит память (примерно 8 КБ на экземпляр WebView) и снижает потребление трафика. Если ваше приложение не использует и не показывает значки сайтов, отключите их автоматическое скачивание с помощью метода WebSettingsCompat.setDownloadFaviconsEnabled() из библиотеки Jetpack Webkit.

    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. Управляйте сохраненным состоянием и избегайте ограничений на транзакции. Если вы сохраняете состояние WebView во время событий жизненного цикла с помощью saveState(Bundle), принудительно ограничьте размер полезной нагрузки, используя WebViewCompat.saveState(), чтобы не превысить лимит savedInstanceState в 1 МБ, установленный в Android. Подробнее о том, как эффективно управлять состоянием WebView…
  9. Оптимизируйте сетевые подключения и загрузку страниц с помощью API упреждающей загрузки. Чтобы сократить задержку при навигации, используйте API Jetpack Webkit для предварительной подготовки сетевых подключений и контента. Вызовите Profile.addQuicHints, чтобы автоматически заполнить поддержку HTTP/3 через QUIC. Тогда WebView сможет сразу использовать QUIC при первом подключении. Чтобы предварительно прогреть сетевые сокеты, используйте Profile.preconnect. Если целевые URL известны или вероятны, используйте Profile.prefetchUrlAsync или WebViewCompat.prerenderUrlAsync, чтобы получать или отрисовывать страницы в фоновом режиме. Подробнее об упреждающей загрузке в WebView…
  10. Отключите автоматическое скачивание значков сайтов, если они вам не нужны. По умолчанию WebView автоматически скачивает значок сайта при его посещении. WebView хранит две копии каждого скачанного значка сайта (одну в Java, а другую в нативной памяти), поэтому отключение скачивания значков сайтов экономит память (примерно 8 КБ на экземпляр WebView) и снижает потребление трафика. Если ваше приложение не использует и не показывает значки сайтов, отключите их автоматическое скачивание с помощью метода WebSettingsCompat.setDownloadFaviconsEnabled() из библиотеки Jetpack Webkit.

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

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