Привет, Хабр! Меня зовут Артем, и вот уже два года, как я работаю над онлайн-кинотеатром 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-библиотеку. При этом для интеграции не требуется добавление сторонних зависимостей в проект. Был рад знакомству, надеюсь, что статья была вам полезна. Если у вас остались или возникли вопросы, приглашаю всех продолжить обсуждение в комментариях!