📱Особенности использования WebView в Android-приложениях

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

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

Подходы к работе с web-контентом

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

WebView используется для разработки приложений, которым для работы не требуется доступ к нативным возможностям ОС или мобильного устройства. Например, это могут быть контентные приложения — новостные порталы или блог-площадки. Часто к WebView прибегают, чтобы сократить время на разработку MVP — возможностей такого приложения достаточно для запуска, а со временем его можно заменить на нативное.

WebView — не единственный вариант работы с веб-контентом, но, строго говоря, все альтернативные способы, так или иначе, приводят к открытию стороннего приложения. Это может быть приложение браузера, например Firefox или Chrome, либо специальный компонент Chrome, который открывается непосредственно в приложении и который разработчик может кастомизировать (Chrome Custom Tabs).

По сравнению с этими подходами WebView предоставляет больший контроль над пользовательским интерфейсом.

Настройка WebView и примеры типовых задач

Чтобы получить базовое представление о работе WebView, попробуем настроить загрузку определенной веб-страницы. В качестве примера возьмем сайт ya.ru или habr.com. Решается эта задача довольно просто — нужно добавить компонент WebView в файл макета активити, а затем инициализировать WebView и загрузить URL, вызвав loadUrl.

Важно знать, что такие задачи встречаются довольно редко и, как правило, нужно что-то более сложное.

Вот как это может выглядеть:

1. Добавляем компонент WebView

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2. Загружаем URL

import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private val webView: WebView = findViewById(R.id.webview)

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    webView?.setJavaScriptEnabled(true)
    webView?.setWebViewClient(new WebViewClient())
    webView?.loadUrl("https://ya.ru")
    }

    override fun onBackPressed() {
    if (webView?.canGoBack()) {
           webView?.goBack()
        } else {
           super.onBackPressed()
       }
    }
}

Однако в реальности такие простые задачи разработчикам приходится решать довольно редко — как правило, требуется реализовать более сложное поведение.

Полноценная настройка WebView — сложный и кропотливый процесс, в котором необходимо учитывать множество различных параметров. Подробнее о том, как настроить WebView, можно прочитать здесь.

Взаимодействие нативной части приложения и WebView

Выше я отметил, что WebView часто используется для разработки приложений, которым не требуется доступ к нативным возможностям устройства или платформы. Но тем не менее такая возможность есть, и WebView может получить доступ к функциональности устройства через настройку взаимодействия между web и нативной частью гибридного приложения. Сделать это можно через обращение к нативной части методом JavascriptInterface — пример, который мы разобрали выше. Мы можем использовать JavascriptInterface для выполнения таких действий, как поворот экрана, показ системного диалогового окна и т. д.

Для обращения к web-части из нативной части приложения можно использовать такие методы, как evaluateJavascript, loadUrl и CookieManager::setCookie.

1. Метод evaluateJavascript позволяет выполнить JavaScript-код на стороне web-приложения из Java-кода.
2. Метод loadUrl позволяет загружать страницы в WebView с определенными HTTP-заголовками, которые можно использовать, например, для рендеринга веб-страницы.
   
3. Метод CookieManager::setCookie позволяет установить cookie в WebView, которые будут применены после перезагрузки страницы.
   

Грамотная настройка взаимодействия между нативной и web-частью позволяет создавать более гибкие и функциональные приложения.

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

Прокидывание авторизационных данных в WebView для авторизации пользователя в web-части приложения

Разберем такой пример: Приложение авторизовано для работы с серверной частью и использует auth_token. Однако при использовании в приложении web-контента сессия пользователя не будет подтягиваться web-частью, и при просмотре контента с помощью WebView пользователь не будет авторизован.

Такая ситуация возможна в нескольких случаях:

1. Изначально раздел создают для web-версии приложения, чтобы проверить продуктовые гипотезы. В этом случае разработка полноценного раздела для всех платформ избыточна, так как большинство продуктовых метрик можно проверить на веб-версии;
2. Пользователи редко пользуются разделом или раздел очень часто меняется, поэтому целевым техническим решением выбирают web-вью с подгружаемым контентом. Тем не менее на таких страницах важно обеспечить авторизацию пользователя текущей сессией для безопасного доступа к защищенным ресурсам.

Подходы к решению:

1. Прокидывать токен с помощью метода loadUrl и использовать его для рендеринга web-страницы. Однако это не подходит для страниц, которые выполняют Ajax-запросы, поскольку в этом случае необходимо сохранять токен в cookies или LocalStorage, что может привести к его компрометации
2. Реализовать JavascriptInterface с методом, возвращающим токен из нативной части приложения, который будет вызываться веб-частью каждый раз при совершении запроса к защищенным ресурсам. В таком случае нативная часть выступит в роли хранилища токенов. Однако это решение не подходит, если для первичного рендеринга веб-страницы необходим доступ к защищенным ресурсам.

В общем случае, когда в нативном приложении необходимо отображать веб-страницу, которая использует Ajax запросы для подгрузки контента, можно использовать комбинацию обоих подходов. Тогда при первоначальной загрузке страницы токен будет передаваться в заголовке запроса веб-страницы, а при дополнительных Ajax-запросах из самой веб-страницы токен будет подставляться из соответствующего JavascriptInterface.

Заключение

Как видим, компонент WebView в Android позволяет разработчикам беспрепятственно интегрировать веб-контент в свои приложения, обеспечивая богатый и динамичный пользовательский интерфейс. Будь то отображение веб-страниц, взаимодействие с веб-контентом или доступ к собственным функциям, WebView позволяет разработчикам преодолеть разрыв между веб-технологиями и собственными технологиями Android. Используя возможности WebView, разработчики могут открыть широкий спектр возможностей и создавать привлекательные, многофункциональные приложения для Android, которые органично сочетают в себе преимущества обоих подходов.