Android 4.2.2 alternative webview – Stack Overflow

Используйте анимацию или установите, чтобы скрыть видимое внимание

XWalkView не может использовать анимацию по умолчанию, даже не setVisibility.

XWalkView represents an Android view for web apps/pages. Thus most of attributes for Android view are valid for this class. Since it internally uses android.view.SurfaceView for rendering web pages by default, it can’t be resized, rotated, transformed and animated due to the limitations of SurfaceView. Alternatively, if the preference key ANIMATABLE_XWALK_VIEW is set to True, XWalkView can be transformed and animated because TextureView is intentionally used to render web pages for animation support. Besides, XWalkView won’t be rendered if it’s invisible.

Включить режим анимации:

Поскольку настройки также глобальны, как отладка, не забудьте закрыть их в onDestroy.

Начало работы с crosswalk

Вы можете увидеть введение Crosswalk в ссылке выше. Я не буду писать описание Crosswalk.Запишите мой опыт:

1. Вам не нужно ничего делать для инкапсуляции, просто используйте это как WebView.
   При использовании библиотеки android-chromium вы не только должны самостоятельно инкапсулировать API для простоты использования, но также беспокоиться об инициализации Chromium и даже должны написать кучу вещей о Chromium в файле манифеста, чтобы помочь Chromium создать отдельный процесс (Crosswalk Будут созданы только нити Chromium, отдельные процессы не требуются).
2. Пешеходный переход поддерживается организацией и намного сильнее индивидуального обслуживания.
3. Будьте в курсе последних версий Chromium, JS и т. Д. Не нужно беспокоиться о функциях, которые нельзя использовать. А в процессе непрерывного обновления предыдущие ошибки обязательно будут исправлены, и стабильность не является проблемой.

Последняя стабильная версия Crosswalk скомпилирована на основе Chromium38.Примечание. Эту библиотеку также можно использовать с Cordova (PhoneGap).Хорошо, чувствую себя законченным, перейдите к учебнику.

Что такое webview?

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

для интеграции web-приложений в наш мессенджер. Что представляет собой web-приложение? По сути, это HTML-страница, которая содержит JavaScript и работает внутри ICQ. Используя ICQ Web API, web-страницы через JavaScript могут отдавать ICQ разные команды, допустим, на отправку сообщений, открытие чата и т.п.

Вот как это выглядит в ICQ. Из пункта Applications можно перейти в список приложений. Это пока еще не WebView, чтобы попасть в него, нужно выбрать одно из приложений. Тогда мы переходим непосредственно в WebView, куда web-приложение загружается из сети.

Как это устроено технически? У WebView есть возможность определенным образом инжектировать Java код в JavaScript. JavaScript может вызывать код, который мы написали и предоставили ему. Это возможность, на которой и основан весь ICQ Web API.

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

Итак, JavaScript из WebView делает вызовы к Java-коду ICQ. Существует большое число различных вызовов, и в процессе разработки встретилось множество проблем, связанных с работой этого механизма, о которых я и расскажу далее.

Основы webview

В двух словах об основах WebView. Рассмотрим четыре строки кода:

Основное использование

Элемент управления, используемый для замены WebView в Crosswalk, называется XWalkView.

Available, but not useful

1. GeckoView – As mentioned in the project page, we don?t intend GeckoView to be a drop-in replacement for WebView. Internally, Gecko is very different from Webkit and trying to expose the same features using the same APIs just wouldn?t be scalable or maintainable.
2. Zirco – an open-source alternative browser for Android. The code is READ-ONLY mode. The browser itself is still available on Google Play.
3. JavaFX – A tutorial entitled Adding HTML Content to JavaFX Applications
4. WebView QML Type – This is a webview library, but ther are no indications this has been ported to Android or other mobile systems.
5. SFSafariViewController – It shares cookies and other website data with Safari, and has many of Safari’s great features, such as Safari AutoFill and Safari Reader. iOS, noticed with iOS9SEE

Important articles

Notes on different ways to extend the API for a given webview library. Includes notes on some libraries not included here.

Important articles regarding android

Android 4.4 (API level 19) introduces a new version of WebView that is based on Chromium. This change upgrades WebView performance and standards support for HTML5, CSS3, and JavaScript to match the latest web browsers. Any apps using WebView will inherit these upgrades when running on Android 4.4 and higher.

Note: If your targetSdkVersion is set to “18” or lower, WebView operates in “quirks mode” in order to avoid some of the behavior changes described below, as closely as possible?while still providing your app the performance and web standards upgrades. (…)

iOS 8 finally gave developers access to a WebKit-powered Web view, called simply WKWebView.

Important references

1. ECMAScript 5 compatibility table
2. browser compatibility cheat sheet
3. Optimizing content for different browsers: the RIGHT way
4. How to Make All Browsers Render HTML5 Mark-up Correctly

Javascript alerts

По умолчанию диалог Alert в WebView не работает. Если загрузить туда страницу HTML с JavaScript и выполнить alert(‘Hello’), то ничего не произойдет. Чтобы заставить его работать, нужно определить свой инстанс WebChromeClient, переопределить метод WebChromeClient.onJSAlert() и в нем вызвать у него super.onJSAlert(). Этого достаточно, чтобы Alerts заработали.

WebView webView = (WebView) findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient() {
  @Override
  public boolean onJsAlert(....) {
       return super.onJsAlert(view, url, message, result);
  }
}

Loadappfrommanifest

manifest.json

Webview alternatives not npm

1. cl.kunder.webview – This webview is totally independent from the main webview, but allows you tu access plugins and other Cordova resources. (sic)

Webviewclient？

Соответствующий WebViewClient WebView, в XWalkView есть XWalkResourceClient.

Work in progress

1. WinRT XAML Toolkit – work in progress (last update may 2022) for Windows Runtime using XAML supports Windows 8

В конце концов

Crosswalk завершен.С Chrome и JavaScript, ваш редактор может быть реализован, и он больше не многословен здесь.

Перепечатка, пожалуйста, укажите адрес этой статьи:

Вызов javascript

Это может быть выполнено только в том случае, если для параметра настройки JavaScriptEnabled установлено значение true, как в WebView.Crosswalk может выполнить JS напрямую.

Конечно, согласно методу, представленному Kitkat, также можно использовать методvaluJavascript. (Рекомендуется богами)

Главный приоритет: предотвращение утечек памяти

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

Unlike other Android views, this class has to listen to system events like application life cycle, intents, and activity result. The web engine inside this view need to get and handle them. And the onDestroy() method of XWalkView MUST be called explicitly when an XWalkView won’t be used anymore, otherwise it will cause the memory leak from the native side of the web engine. It’s similar to the destroy() method of Android WebView.

Этот текст взят из официального документа API XWalkView. Странно то, что официальная парадигма не заботится об этих вещах, она используется прямо как WebView, не говоря уже о методе уничтожения.Учитывая, что перед использованием библиотеки android-chromium ее также нужно явно вызвать. Это добавлено здесь, чтобы избежать утечек памяти.

Есть ли лучший webview для android

Запись файла макета

То же, что и другие пользовательские элементы управления.

Зачем отказываться от webview

Android WebView хорош для обычного просмотра и форматированного текстаредактор(Выполнить JS:document.body.contentEditable=true;), Часто встречаются различные экзотические ошибки, и это трудно исправить.Хотя Google продолжал исправлять ошибки в итерациях версии, по-прежнему было невозможно использовать ее для редактирования расширенного текста.

Известные вопросы

Crosswalk 9.38.208.10 и 10.39.235.15 вылетят при нажатии на MX3 flyme3.5.2 при редактировании html.Crosswalk 8.37.189.12 редактируется нормально на всех известных телефонах, загруженных на Github->Кодовый базовый адрес。

Инжектирование кода java в javascript

Пример кода Java:

WebView webView = (WebView) findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new MyJavaInterface(), "test");
    
private class MyJavaInterface {
    @android.webkit.JavascriptInterface
    public String getGreeting() {
         return "Hello JavaScript!";
    }
}

Пример кода JavaScript:

Здесь показан пример инжектирования кода Java в JavaScript. Создается коротенький Java-класс MyJavaInterface, и у него есть один единственный метод getGreeting(). Обратите внимание, что этот метод помечен маркирующим интерфейсом @JavaScriptInterface — это важно.

Вызывая метод WebView.addJavascriptInterface(), мы пробрасываем данный класс в WebView. Ниже мы видим, как к нему можно обращаться из JavaScript, вызвав test.getGreeting(). Важным моментом здесь является имя test, которое впоследствии в JavaScript будет использовано как объект, через который можно делать вызовы к нашему Java-коду.

Если мы поставим breakpoint на строку return «Hello JavaStript!» и посмотрим имя потока, в котором получен вызов, какой это будет поток? Это не UI-поток, а специальный поток Java Bridge. Следовательно, если при вызове каких-то методов Java мы хотим манипулировать с UI, то нам нужно позаботиться о том, чтобы эти операции передавались в UI-поток — использовать хэндлеры или любой другой способ.

Второй момент: Java Bridge поток нельзя блокировать, иначе JavaScript в WebView просто перестанет работать, и никакие действия пользователя не будут иметь отклика. Поэтому если нужно делать много работы, задачи нужно также отправлять в другие потоки или сервисы.

Исследуйте новые решения для редактирования текста

Очевидно, что даже с решением Lollipop остается много проблем. Нам все еще нужно альтернативное решение, чтобы гарантировать стабильную работу на всех телефонах Android.Это решение заключается в интеграции хрома в приложение.Поскольку компилировать Chromium сложнее самостоятельно, я обратился к поиску скомпилированной библиотеки Chromium для использования.

Киткат меняет

Чтобы усилить функцию WebView, Google представил ядро ​​Chromium в Kitkat. Но есть все еще ошибки редактирования.Я знаю одну ошибку:Версия WebView Kitkat плохо обрабатывается, например, при удалении HTML-тегов.<img>Метка не может быть удалена.

Контроль загрузки страницы в webview

После того, как мы отдали WebView команду на загрузку страницы, следующим шагом нужно узнать результат выполнения: загрузилась ли страница. С точки зрения официальной Android-документации, все просто. У нас есть метод WebViewClient.onPageStarted(), который вызывается, когда страница начинает загружаться.

ОЖИДАНИЕ:

1. onPageStarted→ shouldOverrideUrlLoading (если редирект) → onPageFinished / onReceivedError

РЕАЛЬНОСТЬ:

1. onPageStarted → onPageStarted → onPageFinished
2. onPageStarted → onPageFinished → onPageFinished
3. onPageFinished → onPageStarted
4. onReceivedError → onPageStarted → onPageFinished
5. onReceivedError → onPageFinished (no onPageStarted)
6. onPageFinished (no onPageStarted)
7. shouldOverrideUrlLoading → shouldOverrideUrlLoading

На самом деле, все всегда по-разному и зависит от конкретного устройства: onPageStarted(), onPageFinished() и другие методы могут вызываться два раза, все методы могут вызываться в разном порядке, а некоторые могут не вызываться совсем. Особенно часто подобные проблемы возникают на Samsung и Google Nexus.

Проблему эту приходится решать при помощи добавления дополнительных проверок в наш инстанс класса WebViewClient. Когда он начинает работать, мы сохраняем URL и затем проверяем, что загрузка происходит именно по этому URL. Если она завершилась, то проверяем на наличие ошибок.

Куда ушел loadurl?

Приведенный выше код на самом деле испорчен, просто используйте метод загрузки.

Несоответствие типов java в javascript

Когда мы вызываем некоторые методы, написанные на Java и инжектированные в JavaScript, как показано выше, возникает проблема несоответствия типов Java и JavaScript. В этой таблице приведены основные правила мапинга между системами типов:

Самое основное, что стоит здесь заметить, — то, что объектные обертки не передаются. А из всех Java-объектов в JavaScript мапится только String. Массивы и null в Java преобразуются в undefined в JavaScript.

С передачей в обратную сторону, из JavaScript в Java, тоже есть нюансы. Если вызывать какой-то метод, имеющий параметрами элементарные типы, то можно передать туда number. А если среди параметров метода есть не элементарные типы, а скажем, объектные обертки, такие как Integer, то такой метод не будет вызван. Поэтому нужно пользоваться только элементарными типами Java.

Обработка изменения ориентации устройства

Ещё одна серьезная проблема связана с портретной и альбомной ориентацией. Если поменять ориентацию устройства, то по умолчанию Activity будет пересоздана. При этом все View, которые к ней прикреплены, тоже будут пересозданы. Представьте ситуацию: есть WebView, в который загружена некая игра.

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

. Для этого достаточно прописать в AndroidManifest.xml в разделе активити параметр configChanges.

Это будет означать, что мы сами обрабатываем смену ориентации в activity. Если ориентация изменится, мы получаем вызов Activity.onConfigurationChange() и можем поменять какие-то ресурсы программно. Но обычно activity с WebView имеют только сам WebView, растянутый на весь экран, и там ничего делать не приходится.

Определение состояния сети в javascript

В JavaScript есть полезный объект

. У него есть поле onLine, показывающее статус сетевого подключения. Если у нас есть подключение к сети, в браузере это поле имеет значение true, в противном случае — false. Чтобы оно работало корректно внутри WebView, необходимо использовать метод WebView.

setNetworkAvailable(). С его помощью мы передаем актуальное сетевое состояние, которое можно получить при помощи сетевого broadcast receiver или любым другим способом, которым вы трекаете сетевое состояние в Android. Делать это нужно постоянно. Если сетевое состояние изменилось, то нужно заново вызвать WebView.

Отладка

Начиная с Kitkat, Android обеспечивает совместную отладку с Chrome. Вы можете легко отлаживать код в WebView в Chrome.Crosswalk использует ядро ​​Chromium, конечно, также имеет эту функцию.Инструкция для начала отладки выглядит следующим образом:

Для Crosswalk этот параметр является глобальным.

Пауза js таймер

HTML-код

XWalkView соответствующий метод:

Это также упоминается в примере кода для прослушивания системных событий для предотвращения утечек памяти:

План перехода

При первоначальном поиске альтернатив, это должно быть около октября 2022 года, и было найдено две библиотеки Chromium:

1. chromeview
   Эта библиотека хорошо инкапсулирована, но есть фатальная ошибка, которую нельзя прокрутить.
   README заявляет:

   Attempting to scroll the view (by swiping a finger across the screen) does not update the displayed image.
   However, internally, the view is scrolled.
   This can be seen by displaying a stack of buttons and trying to click on the topmost one.
   This issue makes ChromeView mostly unusable in production.

   Примечание: Crosswalk рекомендуется в последнем утверждении библиотеки README, автор все еще очень внимателен.

2. android-chromium
   Библиотека в целом стабильна и выше нет ошибок. Я использовал его в качестве редактора почти год без проблем.
   Однако в июне и июле этого года неожиданно обнаружилось, что новые планшеты Samsung (оснащенные Kitkat) появились в виде цветочных экранов, а горизонтальные полосы разных цветов появились на экране и не могли быть отредактированы. Другие телефоны, оснащенные Kitkat, не нашли никаких проблем в то время.
   Давайте поговорим об этой библиотеке здесь. Так как автор видел Kitkat, использующий Chromium, автор заявил, что он не будет обновлен, фактически он не обновлялся почти год назад.
   Эта библиотека громоздка в использовании, вам нужно ее инкапсулировать, и даже onPageFinished нужно делать самостоятельно.

Можно видеть, что вышеупомянутые альтернативы фактически недоступны к июню и июлю этого года.И код, который не поддерживается организацией, обычно имеет ненадежное значение.Поэтому мне пришлось продолжать искать альтернативы. Я наконец-то увидел надежду на Google I / O-Crosswalk

Полноэкранный медиаплеер

Если в web-страницу встроен медиаплеер, то часто возникает потребность обеспечить возможность его работы в полноэкранном режиме. Например, медиаплеер

Проблемы при работе с webview

После старта загрузки обычно бывает нужно проконтролировать этот процесс: узнать, успешно ли прошла загрузка, были ли редиректы, отследить время загрузки и другие вещи. Также будет сказано о потоках, в которых работает JavaScript и вызовы в Java, о несоответствии типов Java и JavaScript, поведении Alerts в JavaScript и размерах передаваемых данных. Решение для этих проблем будет также описано дальше.

Размеры данных, передаваемых между java и javascript

Еще одна существенная проблема связана с объемом передаваемых данных между Java и JavaScript. Если передается достаточно большой объем данных (например, картинки) из JavaScript в Java, то при возникновении ошибки OutОfMemory, поймать ее не получится.