Просмотр в приложении с использованием Embedded Web

Встроенные браузеры в приложениях предоставляют пользователям полноценный веб-интерфейс, не заставляя их покидать приложение. Android предлагает два основных API для реализации встроенных браузеров: пользовательские вкладки и WebViews . Используйте встроенный браузер, если у вас есть ссылка или реклама, ведущая на веб-страницу. Вы можете открыть эту страницу прямо внутри приложения, как показано на рисунке 1.

Ссылка внутри приложения в красной рамке и стрелка, указывающая на другой экран, показывающая ссылку, открытую в пользовательской вкладке.
Рисунок 1. Нажатие на внутриигровую ссылку (слева) и открытие внутриигрового браузера с помощью пользовательской вкладки (справа).

Выбор между пользовательскими вкладками и WebView — это важное архитектурное решение, которое влияет на скорость разработки, пользовательский опыт и степень контроля над интерфейсом.

Быстрое сравнение

Воспользуйтесь следующей таблицей, чтобы выбрать инструмент, соответствующий вашим потребностям:

Особенность WebView Пользовательские вкладки
Основной вариант использования Создание гибридных приложений, в которых веб-контент используется в качестве основного или вспомогательного, отображение рекламы, внутриигровых кампаний или страниц с условиями обслуживания. Отображение контента с внешних веб-сайтов (например, новостных статей или страниц товаров).
Управление пользовательским интерфейсом Full. Это компонент View , который можно разместить где угодно. Вы управляете всем окружающим пользовательским интерфейсом. Ограниченные возможности. Вы можете изменить цвет панели инструментов и добавить несколько пользовательских действий.
Данные и сессии Работает в изолированной среде. Файлы cookie и данные для входа в систему не передаются в основной браузер пользователя. Общий. Он использует сессию браузера пользователя по умолчанию, включая файлы cookie и сохраненные пароли.
Мост между нативным и веб-интерфейсом Да. Вы можете использовать JavaScript-мост для глубокой двусторонней связи между веб-контентом и кодом нативного приложения. Ограниченные возможности. Для передачи простых строк можно использовать метод window.postMessage() .
Усилия разработчиков Высокий уровень. Вам необходимо самостоятельно управлять жизненным циклом, навигацией и производительностью. Низкий уровень. Реализовать это можно всего несколькими строками кода.

WebView

WebView — это представление, которое делает веб-страницы неотъемлемой частью макета вашего приложения. Это мощный инструмент, но его использование несколько сложнее по сравнению с пользовательскими вкладками.

WebView может загружать удаленный или локальный веб-контент, выполнять JavaScript и обеспечивать двустороннюю связь между вашим веб-контентом и кодом нативного приложения. Чтобы узнать больше о его возможностях, см. раздел «Что может делать WebView» .

Вы также можете использовать WebView для создания веб-приложения или отображения веб-страницы в рамках вашего приложения. Например, пользовательского соглашения, которое необходимо периодически обновлять. Для получения дополнительной информации см. раздел «Создание веб-приложений в WebView» .

Почему стоит выбрать WebView

Ниже приведены некоторые сценарии, в которых WebView хорошо подходит:

  • Гибридные приложения: вы создаёте приложение, в котором веб-контент и нативные компоненты (например, панель навигации или плавающая кнопка действия) располагаются рядом.
  • Собственный контент: ваш веб-контент является ключевой интерактивной частью приложения, подобно редактору документов или холсту для дизайна.
  • Полный контроль над пользовательским интерфейсом: вам необходимо изменять содержимое самой веб-страницы или накладывать поверх неё собственные элементы пользовательского интерфейса.
  • Углубленная аналитика: Вам необходима подробная информация о вовлеченности и активности пользователей в веб-интерфейсе.

Ключевые компромиссы

Ниже перечислены некоторые ключевые компромиссы, которые следует учитывать при использовании WebView:

  • Производительность: WebView может быть ресурсоемким в плане использования памяти. Если не управлять им должным образом, могут возникнуть проблемы с производительностью или ошибки ANR (App Not Responding — приложение не отвечает).
  • Безопасность и обслуживание: Вы отвечаете за усиление безопасности и управление жизненным циклом. Однако обновления WebView распространяются по всему миру через Google Play, поэтому вам не нужно беспокоиться о том, что базовый движок устареет.

Пользовательские вкладки

Пользовательские вкладки — отличный выбор для перенаправления пользователей на внешние URL-адреса, поскольку они предоставляют быстрое, безопасное и удобное окно браузера, которое выдвигается поверх вашего приложения.

Почему вам стоит выбрать пользовательские вкладки

Ниже приведены некоторые сценарии, в которых пользовательские вкладки окажутся полезными:

  • Внешние ссылки: Когда пользователь переходит по ссылке на веб-сайт, который вам не принадлежит, пользовательские вкладки сохраняют его в контексте вашего приложения, обеспечивая при этом полноценную работу в браузере.
  • Простота интеграции: это самый простой способ быстро запустить встроенный веб-интерфейс.
  • Общее состояние: Поскольку файлы cookie используются совместно с браузером пользователя по умолчанию, пользователям не нужно повторно входить на сайты, которые они уже посещали.
  • Вход через сторонние сервисы: Они хорошо подходят для авторизации через сторонние сервисы (например, «Вход через Google» или «Вход через Facebook»), поскольку браузер безопасно обрабатывает учетные данные.

Хотя большинство браузеров поддерживают пользовательские вкладки, некоторые предлагают больше возможностей для настройки, чем другие. Для получения дополнительной информации см. раздел «Поддержка браузеров» .

Используйте веб-контент в Jetpack Compose

При сборке с помощью Jetpack Compose можно использовать как пользовательские вкладки (Custom Tabs), так и WebView:

  • Пользовательские вкладки: Поскольку пользовательские вкладки используют Intent , вы можете запускать их из любого Context в ваших функциях Compose, что обеспечивает бесшовную интеграцию.
  • WebView: В Compose пока нет встроенной функции компоновки WebView, поэтому вам потребуется использовать AndroidView для встраивания стандартного WebView в ваш макет.

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

Для разработки веб-страниц для устройств на базе Android с использованием API WebViews или Custom Tabs см. следующие документы: