Привет, Хабр! Меня зовут Артем, и вот уже два года, как я работаю над онлайн-кинотеатром PREMIER. Эта история началась, как и многие другие, со слов тимлида: “Артем, есть интересная задачка”.
Ситуация была следующая: библиотека, над интеграцией которой велись работы, не имела поддержки Android TV. Для этой библиотеки существовала мобильная версия и версия для веб-клиентов, написанная на JavaScript.
Поскольку поддержки Android TV, в частности навигации с помощью пульта, внутри библиотеки предусмотрено не было, я решил использовать web-версию библиотеки и кастомный интерфейс с поддержкой Android TV.
Что из этого вышло - читайте далее. Статья будет полезна тем, кто любит смелые эксперименты, работает с Android или Android TV и знает, что такое Javascript.
Кто-то же точно такое делал…
Решив использовать web-версию библиотеки, я начал искать подходящий инструмент для исполнения задуманного.
Первым шагом я решил обратить внимание на крупные фреймворки. Выбор пал на Rhino от Mozilla. Rhino — инструмент с практически безграничными возможностями: исполнение кода, подключение библиотек, создание интерфейса, — кажется, что пять минут и дело в шляпе это идеальный вариант для интеграции.
Однако при переходе на сайт фреймворка я обнаружил приветливое «Page not found». Но отчаиваться было рано — впоследствии мне все же удалось найти «живой» репозиторий. Помимо этого, также нашлись и более «нативные» адаптации Rhino под андроид — F43nd1r/rhino-android
Позже выяснилось, что Rhino не имеет возможности динамической подгрузки библиотек. Добавить библиотеку в Rhino можно через npm или, более простой вариант, — добавить в проект min.js файл, скачанный заранее. Но в нашем случае js-библиотеку, которую мы внедряли, нужно было каждый раз заново скачивать с сервера. То есть возможности добавить min.js файл библиотеки в проект у меня не было и от идеи использовать Rhino пришлось отказаться.
После отказа от Rhino я продолжил поиски. Выяснил, что существует ряд самописных решений, использующих под капотом в качестве «движка» WebView. Например вот это: evgenyneu/js-evaluator-for-android. Эти библиотеки позволяют исполнять простые js выражения внутри WebView. Но у таких решений также отсутствует возможность подключения библиотек. А это означало для нас только одно — такое решение нам все еще не подходит. “Все пропало, шеф?”
Стадия пятая. Принятие
После нескольких неудачных попыток найти готовое решение, которое полностью бы меня устроило, я решил попробовать реализовать свой небольшой “фреймворк”. За основу “фреймворка” я взял WebView, поскольку многие необходимые функции там уже есть “из коробки”. А дальше я постараюсь подробно рассказать, как можно превратить простой WebView в JS-интерпретатор.
Шаг первый. Подготовка
Для начала нужно подготовить WebView для наших целей. На этой стадии нужно учесть несколько моментов:
Чтобы использовать объект, его нужно создать :)
В настройках WebView нужно включить возможность исполнения JS-скриптов
Чтобы избежать неожиданных проблем, связанных с кэшированием, у WebView нужно отключить кэш. Так мы точно будем уверены, что все операции выполняются начисто и в контексте страницы не осталось хвостов от прошлых вызовов.
Ниже приведен пример создания WebView со всеми необходимыми настройками:
//Создаем WebView
val webView = WebView(context)
with(webView) {
//Разрешаем исполнение JavaScript кода
settings.javaScriptEnabled = true
//Отключаем кэш у webView
settings.cacheMode = WebSettings.LOAD_NO_CACHE
}Теперь, когда мы настроили все необходимое, можно переходить к созданию наших JS-скриптов.
Шаг второй. Подготовка JS-скриптов
Чтобы добавить наш первый JS-скрипт в проект, нужно создать html файл, в котором он будет находиться. Html файл нужно разместить в директории assets внутри проекта. С этим файлом будет работать WebView, а именно загружать его как локальную html страницу, догружая все необходимые зависимости.
Затем в файл нужно добавить стандартную структуру html страницы — теги head, body и т.д. (см. пример). После создания пустой страницы можно переходить к добавлению самих скриптов. Подключение скриптов происходит стандартным для html способом — через использование тега <script/>. Библиотеки подключаются так же. В нашем случае, для примера мы будем использовать популярную библиотеку moment.js, с помощью которой будем узнавать текущее время.
Назовем наш файл sample.html. Внутри него подключим библиотеку moment.js и создадим функцию checkMoment, которая будет возвращать текущее время в формате строки.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script type="text/javascript">
function checkMoment() {
return moment().toString();
}
</script>
</body>
</html>Шаг третий. Запуск первого скрипта
WebView настроено, скрипты созданы — самое время переходить к запуску.
Для того чтобы запустить js-код, вначале надо загрузить нашу страницу со скриптами в WebView. Но при загрузке страницы нужно учитывать — вызов js-функции должен произойти после того, как WebView загрузит страницу и все ее содержимое.
Чтобы определить момент, когда WebView закончит загружать данные, нужно использовать WebViewClient. В нем нам понадобятся два метода — onPageFinished и onReceivedError. Метод onPageFinished вызывается в тот момент, когда WebView завершит загрузку данных, а onReceivedError сигнализирует, что в процессе загрузки возникла ошибка.
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
//Страница загружена и готова к использованию
}
override fun onReceivedError(view: WebView?, request: WebResourceRequest?, error: WebResourceError?) {
super.onReceivedError(view, request, error)
//в процессе загрузки возникла ошибка
}
}Загрузив все необходимое, переходим (наконец-то!) к исполнению нашего скрипта.
WebView из коробки имеет функцию evaluateJavaScript. Эта функция принимает в качестве аргумента js-выражение, которое будет исполняться в текущем контексте WebView. То есть после того, как мы загрузили html-страницу с подключенной библиотекой, мы можем через метод evaluateJavascript обращаться к методам библиотеки. Выглядеть это будет следующим образом:
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
//Страница загружена и готова к использованию
//вызываем js функцию checkMoment
webView.evaluateJavascript("checkMoment()") { result ->
Toast.makeText(requireContext(), "result: $result", Toast.LENGTH_SHORT).show()
}
}
override fun onReceivedError(view: WebView?, request: WebResourceRequest?, error: WebResourceError?) {
super.onReceivedError(view, request, error)
//в процессе загрузки возникла ошибка
}
}
webView.loadUrl("file:///android_asset/sample.html")После добавления webViewClient код выше вызовет у webView метод loadUrl, который загрузит нашу страницу со скриптами, созданную ранее. После окончания загрузки дернется метод webViewClient.onPageFinished, в нем вызовется метод webView.evaluateJavascript, который, в свою очередь, вызовет нашу функцию checkMoment. Результат исполнения checkMoment (помним, что это текущая дата и время, сконкатенированные в одну строку) вернется в коллбек и финальным действием покажется тост, отображающий текущую дату.
Подробно проговорили принцип работы, запомнили, разложили по полочкам, двигаемся дальше.
А давайте сделаем это асинхронным?
Следующий вопрос, который встал передо мной: как быть в том случае, если нужно выполнить запрос из js-кода? А ведь ради этого все и затевалось. Ответ напрашивается сам собой — нужно написать обертку, которая позволила бы асинхронно выполнять нужные операции.
Для этого создадим свой класс, назовем его JSClient. В новый класс перенесем WebView и настройки для нее.
class JSClient(context: Context) {
val webView = WebView(context)
init {
with(webView){
settings.javaScriptEnabled = true
settings.cacheMode = WebSettings.LOAD_NO_CACHE
webChromeClient = WebChromeClient()
}
}
}Как обсуждали ранее, перед тем как исполнять js-код, нужно загрузить в webView нашу страницу. Для этого создадим suspend функцию внутри нашего класса, которая будет отвечать за подготовку webView к работе. Назовем ее startConnection. Внутрь этой функции мы поместим код загрузки webView с использованием webViewClient из прошлого пункта
suspend fun startConnection() = suspendCancellableCoroutine<Boolean?> { continuation ->
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
if (continuation.isActive) {
continuation.resume(true)
}
}
override fun onReceivedError(view: WebView?, request: WebResourceRequest?, error: WebResourceError?) {
super.onReceivedError(view, request, error)
if (continuation.isActive) {
continuation.resumeWithException(RuntimeException())
}
}
}
webView.loadUrl("file:///android_asset/sample.html")
}
}Теперь представим, что функция checkMoment из прошлого пункта делает запрос и может выполняться достаточно продолжительное время. В таком случае нужно создать вариант асинхронного вызова и для нее тоже.
suspend fun checkMoment() = suspendCoroutine<String> { continuation ->
webView.evaluateJavascript("checkMoment()") { result ->
when {
!result.isNullOrEmpty() -> continuation.resume(result)
else -> continuation.resumeWithException(Throwable())
}
}
}А теперь соберем все вместе и выполним первый асинхронный запрос.
val client = JSClient(context)
viewLifecycleOwner.lifecycleScope.launch {
client.startConnection()
val result = client.checkMoment()
Toast.makeText(requireContext(), result, Toast.LENGTH_LONG).show()
}В коде выше инициализируется наш класс JSClient, затем вызывается функция startConnection. Эта функция подготавливает webView к работе и загружает скрипты. После окончания работы startConnection, происходит вызов асинхронной версии функции checkMoment, которая по-прежнему возвращает текущую дату и на экран выводится тост.
Плюсы, минусы, подводные камни
Следующей проблемой, с которой я столкнулся, было исполнение нескольких запросов подряд. В предыдущем решении есть большой минус — для выполнения каждого запроса нужно подгружать заново скрипты и библиотеки. Это лишний расход трафика, да и время это может занимать достаточно большое (зависит от размеров и количества подключенных библиотек). Ответ на вопрос “что теперь делать?” лежал на поверхности. Перед загрузкой нашей страницы со скриптами, нужно проверить — действительно ли их нужно загрузить или они уже были загружены ранее?
Для того чтобы проверять необходимость загрузки данных, я добавил в наш sample.html файл еще одну функцию — isScriptsLoaded. Основная роль этой функции — проверить, лежит ли библиотека внутри WebView.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script type="text/javascript">
function isScriptsLoaded() {
return typeof moment === 'function';
}
</script>
<script type="text/javascript">
function checkMoment() {
return moment().toString();
}
</script>
</body>
</html>В коде выше функция isScriptsLoaded с помощью оператора typeof сравнивает тип метода moment и функции. Это выражение будет истинно в том случае, если библиотека подгрузилась успешно и WebView готово к работе. Если в процессе загрузки произошла ошибка или данные не были загружены, оператор typeof вернет ‘undefined’
Теперь разберемся с тем, как эта функция поможет нам предотвратить лишнюю перезагрузку данных.
Для начала добавим ее в нашу функцию startConnection, перед загрузкой данных WebView.
suspend fun startConnection() = suspendCancellableCoroutine<Boolean?> { continuation ->
webView.evaluateJavascript("isScriptsLoaded()") { result ->
when(result) {
"true" -> continuation.resume(true)
else -> {
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
if (continuation.isActive) {
continuation.resume(true)
}
}
override fun onReceivedError(view: WebView?, request: WebResourceRequest?, error: WebResourceError?) {
super.onReceivedError(view, request, error)
if (continuation.isActive) {
continuation.resumeWithException(RuntimeException())
}
}
}
webView.loadUrl("file:///android_asset/sample.html")
}
}
}
}Использование и способ вызова функции startConnection остаются неизменными:
val client = JSClient(context)
viewLifecycleOwner.lifecycleScope.launch {
client.startConnection()
val result = client.checkMoment()
Toast.makeText(requireContext(), result, Toast.LENGTH_LONG).show()
}Но теперь у нас есть возможность, при вызове startConnection определить, действительно ли нужно перезагружать данные. После вызова isScriptsLoaded мы определяем, загружены скрипты (isScriptsLoaded вернула “true”) или нет (isScriptsLoaded вернула “undefined”) и на этом основании либо возвращаем информацию о том, что webView готово к работе, либо загружаем данные заново.
Заключение
Вот так закончилось приключение под названием “интеграция JS в android приложение”. С помощью такого подхода можно подключить к проекту практически любую JS-библиотеку. При этом для интеграции не требуется добавление сторонних зависимостей в проект. Был рад знакомству, надеюсь, что статья была вам полезна. Если у вас остались или возникли вопросы, приглашаю всех продолжить обсуждение в комментариях!
