Как создать простое WebView-приложение

Начало работы с WebView2 в приложениях Win32

Установите следующие необходимые условия перед началом.

Visual Studio 2015 или более поздней с установленной поддержкой C++.

WebView2 Runtimeили любой Microsoft Edge (предварительный просмотр) Канала (Бета-версия, Dev или Canary), установленного на поддерживаемой операционной системе (ОС). Поддерживаемый в настоящее время список ОС Windows 11, Windows 10, Windows 8.1 и Windows 7.

Шаг 1 . Создание приложения с одним окном

Начните с базового настольного проекта с одним основным окном.

Чтобы лучше сосредоточиться на погонах, используйте измененный пример кода из Walkthrough: Создайте традиционное Windows настольное приложение (C++) для примера приложения. Чтобы скачать измененный пример и начать работу, перейдите в WebView2 Samples.

1. В Visual Studio откройте WebView2GettingStarted.sln . Если вы используете более старую версию **** Visual Studio, в обозревателе решений щелкните правой кнопкой мыши WebView2GettingStartedи выберите Свойства. Щелкните Общиесвойства конфигурации, затем измените Windows SDK Version и Platform Toolset для использования > **** SDK и Visual Studio win10. ****

Visual Studio могут отображаться ошибки, так как в проекте отсутствует файл загона WebView2. Ошибки устраняются после завершения раздела 2 — установка SDK WebView2.

Шаг 2 . Установка SDK WebView2

Добавьте SDK WebView2 в проект. Используйте NuGet для установки SDK Win32.

В Обозревателерешений щелкните правой кнопкой мыши имя проекта, а затем выберите Управление NuGet пакетами.

Управление пакетами NuGet

Установите библиотеку Windows реализации.

В панели поиска введите Microsoft.Windows.ImplementationLibrary > Microsoft.Windows. ImplementationLibrary.

В правом окне выберите Установите. NuGet загружает библиотеку на компьютер.

Библиотека Windows и библиотека шаблонов Windows C++ являются необязательными и упрощают работу с COM в примере.

Windows Библиотека реализации

Установите SDK WebView2.

В панели поиска введите и Microsoft.Web.WebView2 выберите Microsoft.Web.WebView2.

В правом окне нажмите кнопку Установите. NuGet скачивает SDK на компьютер.

NuGet диспетчер пакетов

Добавьте в проект заглавную страницу WebView2.

В HelloWebView.cpp файле скопируйте следующий фрагмент кода и вклеите его после последней #include строки.

Раздел include должен выглядеть так же, как и следующий фрагмент кода.

Проект готов к использованию и сборке с API WebView2.

Сборка пустого примера приложения

Чтобы сохранитьпроект, нажмите кнопку Сохранить все файлы > (Ctrl+Shift+S).

Нажмите кнопку F5 для создания и запуска проекта.

В примере приложения отображается пустое окно.

В примере приложения отображается пустое окно.

Шаг 3 . Создание единого управления WebView2 в родительском окне

Добавьте управление WebView2 в главное окно.

Используйте метод, чтобы настроить среду и найти Microsoft Edge CreateCoreWebView2Environment браузера, на который установлено управление. Вы также можете использовать метод, если вы хотите указать расположение браузера, папку пользователя, флаги браузера и так далее, а не использовать параметр CreateCoreWebView2EnvironmentWithOptions по умолчанию. После завершения метода запустите метод внутри вызова и запустите метод, чтобы CreateCoreWebView2Environment ICoreWebView2Environment::CreateCoreWebView2Controller получить ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler ICoreWebView2Controller::get_CoreWebView2 связанное WebView.

В вызываемом вызове установите еще несколько параметров, повторно установите webView2 для заполнения 100% родительского окна и отобразите Bing.

Скопируйте следующий фрагмент кода и вклейку после комментария и HelloWebView.cpp // <— WebView2 sample code starts here —> перед // <— WebView2 sample code ends here —> комментарием.

Создайте Bing пример приложения

Чтобы сохранитьпроект, нажмите кнопку Сохранить все файлы > (Ctrl+Shift+S).

Нажмите кнопку F5 для создания и запуска проекта.

Теперь у вас есть окно WebView2 с отображением Bing страницы.

Шаг 4 — события навигации

Команда WebView2 уже перекрыла переход на URL-адрес с помощью ICoreWebView2::Navigate метода на последнем шаге. Во время навигации WebView2 запускает последовательность событий, к которым может прослушиваться хост.

1. NavigationStarting
2. SourceChanged
3. ContentLoading
4. HistoryChanged
5. NavigationCompleted

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

• SourceChanged
• ContentLoading
• HistoryChanged

Если происходит перенаправление HTTP, в строке несколько NavigationStarting событий.

В качестве примера использования событий зарегистрируйте обработник события, чтобы отменить любые запросы, не NavigationStarting относясь к https. Скопируйте следующий фрагмент кода и вклеите в HelloWebView.cpp .

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

Шаг 5 — сценарий

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

• Запустите его после создания глобального объекта.
• Запустите его перед запуском любого другого сценария, включенного в HTML-документ.

Скопируйте следующий фрагмент кода и вклеите в HelloWebView.cpp .

Теперь WebView2 замораживает и Object возвращает документ страницы один раз.

API для впрыскивания скриптов (и некоторые другие API WebView2) являются асинхронными, если код необходимо выполнить в определенном порядке, следует использовать вызовы.

Шаг 6 . Связь между хост-контентом и веб-контентом

С помощью метода хост и веб-контент также могут взаимодействовать друг с postMessage другом. Веб-контент, работающий в пределах управления WebView2, может отправляться хосту с помощью метода, а сообщение обрабатывается любым зарегистрированным обработивимом событий на window.chrome.webview.postMessage ICoreWebView2WebMessageReceivedEventHandler хосте.

Кроме того, хост может отправлять сообщения веб-контенту с помощью метода или метода, и сообщение ловят обработчики, добавленные ICoreWebView2::PostWebMessageAsString ICoreWebView2::PostWebMessageAsJSON из window.chrome.webview.addEventListener слушателя. Этот механизм связи позволяет веб-контенту использовать личные возможности, передав сообщения, чтобы попросить хост запустить личные API.

В качестве примера для понимания механизма при попытке вывода URL-адреса документа в WebView возникают следующие действия.

1. Хост регистрирует обработник, чтобы вернуть полученное сообщение обратно в веб-контент.
2. Хост вводит сценарий в веб-содержимое, которое регистрирует обработник для печати сообщения из хоста.
3. Хост вводит сценарий в веб-контент, который публикует URL-адрес хоста.
4. Обработник хоста запускается и возвращает сообщение (URL-адрес) в веб-контент.
5. Обработник веб-контента запускается и печатает сообщение из хоста (URL-адрес).

Скопируйте следующий фрагмент кода и вклеите в HelloWebView.cpp .

Чтобы сохранитьпроект, нажмите кнопку Сохранить все файлы > (Ctrl+Shift+S).

Нажмите кнопку F5 для создания и запуска проекта.

URL-адрес отображается в всплывающее окно перед переходом на веб-страницу.

Пример приложения с управлением Webview2 отображает веб Bing веб-сайт, http://www.bing.com . В примере приложения также отображается кнопка OK. Пользователи нажмите кнопку ОК, чтобы продолжить url-адрес.

Поздравляем, вы создали свое первое приложение WebView2!

Дальнейшие действия

Дополнительные информацию о функциях WebView2, не охваченных в этой статье, см. в следующих ресурсах.

От веб-сервиса к андроид-приложению в два счета

Мы живем в эру мобильных устройств. Однажды нам в голову приходит идея создать супер-мега приложение для мобильных устройств и разместить его в магазине приложений. Однако, тут возникает одна небольшая проблема: мы всего лишь веб-разработчики. Мы не разбираемся в языках Java и Objective-C, и не располагаем лишним временем для их изучения.
Сегодня у нас появилась возможность воплотить свои мечты в реальность и улучшить мир, в котором мы живем, с помощью наших супер-мега приложений.

В этой статье мы опишем процесс создания гибридного приложения для операционной системы Андроид.

Гибридное приложение сочетает в себе свойства как нативных, так и веб-приложений. Как нативное приложение, оно может распространяться среди пользователей через магазин приложений, а также пользоваться преимуществами многочисленных функций мобильных устройств. Как веб-приложение, оно состоит из HTML, CSS и Javascript файлов.

Преимущества данного типа приложений заключаются в следующем:

• почти все приложения могут быть написаны на языке JavaScript для всех мобильных платформ;
• они могут использовать такие функции мобильного устройства, как камера, акселерометр, и др.;
• все HTML, CSS и JavaScript файлы можно обновить, не ожидая утверждения новой версии приложения.

Однако, гибридное приложение все же работает медленнее нативного. Но это не такая большая проблема, потому что самую медленную часть приложения можно написать на Java или Objective-C и добавить при следующем обновлении.

Давайте приступим к созданию приложения, а заодно и к изменению мира к лучшему!

Шаг первый. Готовимся захватить мир

Итак, давайте приступим к воплощению нашей идеи и создадим наше первое приложение для андроид. Прежде всего, необходимо скачать Android SDK и другие инструменты для эмуляции различных Android-устройств либо драйверы для тестирования приложения на реальном устройстве. Это совсем несложно: просто загрузите пакет . Здесь вы найдете IDE Eclipse с уже встроенным расширением ADT, Android SDK, SDK Manager и другие.

Теперь, когда у вас есть все эти файлы, запустите файл SDK Manager.exe (для ОС Mac или Linux откройте в командной строке директорию «tools/», которая находится в скачанном пакете Android SDK, затем выполните команду android sdk) и установите следующие инструменты:

1. SDK Tools. Этот пакет уже должен быть установлен, если же нет, то вы знаете, что делать;
2. SDK Platform-tools;
3. SDK для одной из версий Android. Ваше новое Android-приложение должно быть скомпилировано под какую-либо версию ОС Android. Мы использовали самую последнюю версию Android на момент написания статьи, чтобы иметь возможность использовать новые функции;
4. Драйверы. Если вы хотите протестировать свое приложение на андроид-устройстве, необходимо установить Web и USB-драйверы (если у вас возникают проблемы с отладкой приложений на реальных устройствах, можете поискать подсказки в этой статье или задать нам вопрос в комментариях).

Отлично! Мы закончили с самой скучной частью создания приложений для андроид. Давайте запустим Eclipse IDE, загруженную вместе с SDK, и начнем изменять мир. Кроме того, если хотите, можете загрузить Android Studio (IDE на базе IntelliJ IDEA). Должны вас предупредить, что она все еще работает в бета-версии и может доставить дополнительные неудобства.

Шаг второй. Создаем приложение

Основой всех гибридных приложений является элемент WebView. Данный элемент отображает веб-страницы с помощью WebKit-движка. Это значит, что вы можете создать обычный HTML-файл, содержащий <style> или <link> теги для подключения CSS, и <script> теги для добавления JS-кода, а затем передать его в элемент WebView. В результате получится практически такое же изображение, как если бы вы открыли данную страницу в браузере (сравните изображения ниже).

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

Для начала, откройте уже загруженный Eclipse и создайте новый Android Application Project. Задайте ему имя и выберите версию Android, для которой хотите скомпилировать свое приложение. Кроме того, вы можете создать иконку для своего нового приложения, а также activity. В данном случае под activity понимается набор элементов пользовательского интерфейса, занимающих весь экран и необходимых для выполнения какого-либо действия (но, для этого примера вам не нужно что-либо здесь менять). Когда вы кликните на кнопку Finish, ваше первое приложение для Android будет создано.

Opened in Chrome Browser	Opened in WebView

IDE автоматически создает множество файлов. Давайте посмотрим на некоторые из них:

1) AndroidManifest.xml – этот файл содержит информацию о вашем приложении и обо всем, что оно умеет делать. ОС Android считывает этот файл при установке и запуске приложения. Необходимо добавить в этот файл всю информацию о функциях андроид-устройств, которые вы бы хотели использовать (камера, список контактов и т.д.). Кроме того, в данном манифесте также указываются все пользовательские (UI) темы, контроллеры, а также фоновые сервисы. Получить детальную информацию можно здесь;
2) res/layout/.xml — этот файл содержит описание всех UI-элементов, которые вы собираетесь использовать для того или иного activity. Для нашего гибридного приложения необходимо всего одно activity и один UI-элемент (WebView). Если вы хотите добавить какие-либо нативные кнопки Android, они должны быть описаны в данном файле;
3) src — в этой папке размещаются все ваши Java-файлы;
4) res/drawable — содержит все ваши графические файлы;
5) bin — здесь находятся все ваши скомпилированные файлы;
6) assets — содержит все типы файлов, к которым вы хотите иметь доступ. Это могут быть статичные HTML-файлы или какие-либо CSS или JS-файлы, которые будут добавлены в .apk вашего приложения.

Существуют некоторые сложности добавления всех файлов в папку assets. Одна из них состоит в том, что когда нужно внести какие либо-изменения или исправить ошибки, необходимо обновить свое приложение через магазин приложений, поскольку вам придется компилировать новый .apk файл. Это значит, что нужно будет ожидать подтверждения, и пр. Однако, если вы получаете все файлы со своего веб-сервера, все ресурсы (HTML,CSS, JS) можно изменить сразу же, если они протестированы должным образом.

Теперь мы знаем все, что нам нужно для создания простого гибридного приложения. Прежде всего, мы должны изменить файл лeйаута (res/layout/.xml). Давайте добавим WebView элемент и растянем его на весь экран:

Две стороны WebView: о быстром запуске проектов и краже персональных данных

Меня зовут Евгений, я Full Stack JS разработчик, текущий стек Node.js + React + React Native. В разработке я более 10 лет. В мобильной разработке пробовал разные инструменты от Cordova до React Native. Получив опыт работы с Cardova, я понял, что мне хотелось бы создавать нативные интерфейсы, на мой взгляд WebView не должно быть всем приложением. Но это не значит, что его не надо использовать вовсе.

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

Источник: srishta.com

Также немного расскажу о том, как вы можете использовать WebView и как его могут использовать против вас злоумышленники. Примеры в статье будут показаны с использованием фреймворка React Native, но те же идеи можно реализовать и без него.

Немного про стартапы

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

Как правило, чтобы стартап стал успешным, ему нужно быстро запуститься. Потеряешь время – и конкуренты тебя обойдут. Это понимают и у нас, и на Западе. Но российский подход к запуску, как правило, гораздо основательнее — в плохом смысле этого слова.

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

Европейские и американские стартапы действуют иначе. Для начала они ограничиваются только мобильной веб-версией с минимально достаточной функциональной частью. Ее можно смотреть и с десктопов, и с мобильных устройств. И на этом этапе проект готов к запуску! После запуска для мобильных устройств делается приложение.

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

Предлагаю подробнее рассмотреть тот этап, когда уже есть мобильная версия сайта и нужно разрабатывать приложение для мобильных устройств. Итак, мы сделали сайт, а значит занимались разработкой серверного API, интерфейса и бизнес-логики. Два из трех компонентов –
— интерфейс и логика — присутствуют и в мобильном приложении. Согласитесь, не хочется писать их заново.

Объединяем лучшее от нативных и веб-приложений

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

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

Объединить все достоинства нативных приложений и веба позволяют гибридные приложения, которые создают с помощью компонента WebView. Конечно, найдутся дотошные разработчики, которые категорически против WebView в любых его проявлениях. Они аргументируют это тем, что приложение должно сразу быть полностью нативным, чтобы можно было использовать все возможности мобильного устройства, а также обеспечить комфортную производительность пользовательского интерфейса. Но во многих случаях, когда возможностей мобильной версии сайта вполне достаточно, можно сократить время первого запуска, сделав гибридное приложение, и заменять его на нативное постепенно.

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

Есть несколько ситуаций, в которых целесообразно использовать гибридные приложения. Они хороши в качестве временной заглушки для быстрого старта — когда у нас готова мобильная версия сайта, а мобильное приложение нужно было «вчера». Такое приложение можно создать за несколько часов, запустить в продакшн. Пользователи получат возможность работать с мобильным приложением, а вы — возможность работать над более полноценной версией в менее жестких временных рамках (если это нужно).

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

Гибридное решение не всегда временное. Его возможности позволяют переиспользовать в приложении кодовую базу, созданную ранее для веб-версии. К примеру специфичные анимации уже созданные на Canvas. Также WebView удобен, когда используется какой-то сторонний сервис. Еще один вариант – когда у вас есть сложный интерфейс, который проще подключить через WebView.

Как использовать WebView

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

На гифке можно увидеть 2 меню. Правое меню является частью сайта, реализованное на веб, слева нативное меню, реализованное внутри мобильного приложения. Чтобы получить первое приближение к нативному приложению, нам достаточно просто скрыть то меню, которое реализовано на веб. Вот сколько кода нужно, чтобы через WebView отобразить веб-версию внутри приложения:

Следующий пример – о том, как нативная часть может взаимодействовать с вебом.

Робот нарисован на Canvas, это часть веб-сайта. А переключатель к нему построен на нативном UI. На разных телефонах он будет выглядеть по-разному. Мы можем управлять движениями робота при помощи переключателя. Можно и наоборот – какими-то элементами веб-интерфейса влиять на приложение. В React Native для этого предусмотрено специальный API для взаимодействия между вебом и нативной частью.

Ниже код для использования этой анимации. Layout — все пространство. Picker — нативная часть, которая может выбирать из dropdown варианты состояния робота. WebView — контейнер для отображения веба, внутри которого отрисовывается робот.

Подобные кейсы возникают часто. Например, мы сделали приложение для тестирования и аттестации стоматологов. Для каждого варианта ответа в тесте внутри вопросов рисовалась анимация, реализованная посредствам Canvas на вебе. Задача состояла в том, чтобы создать мобильное приложение, с этим тестированием. Использовав WebView, мы смогли отображать анимации из веба, тогда как остальной интерфейс мы построили нативно. Анимация отлично работала даже на старых смартфонах.

Как делаются инъекции

До 2013 года браузер Opera использовал собственный движок Presto, но потом его перевели на движок Blink от Google. Многих пользователей это очень расстроило. Свет на причины этого перехода проливает видео «Зачем опере вебкит». Главные виновники — большие корпорации типа Google или Facebook, которые не тестировали код своих продуктов в Opera и запрещали отображение страниц в этом браузере, ссылаясь на то, что он не достаточно популярен у пользователей.

Например, заходишь на Gmail через Opera и видишь: «Ошибка JavaScript». Пишешь в саппорт, получаешь ответ: «Opera у нас не поддерживается, мы не будем писать под нее код». Сначала компания Opera нанимала разработчиков, чтобы писать инъекции – специальный код, который встраивался в Gmail и позволял ему работать в Opera. Но постепенно таких сайтов, как Gmail, становилось все больше. Opera сдалась и сменила движок.

Так о чем это я? Ах да самое время поговорить об инъекциях:

На гифке – пример инъекции, которая изменяет поведение сайтов. Допустим, у нас есть чужой сайт, и мы делаем инъекцию стилей – скрываем правое меню и слайдер, выезжающий справа. Это – инъекция стилей. Логика работы сайта не меняется, только отображение.

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

Следующая инъекция интереснее. Допустим, у нас есть мобильное приложение, а в нем — встроенный мобильный браузер.

Человек переходит по ссылке, и мы запросто подставляем ему страничку Фейсбука, в которой нужно ввести логин и пароль. Если человек его вводит – приложение его перехватывает. Вот код:

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

Минутка паранойи: браузеры, встроенные в приложения

Как известно, во многих приложениях есть встроенные браузеры (WebView) — например, ВКонтакте, Telegram, Gmail, WhatsApp и так далее. Крупным компаниям мы можем доверять, но WebView используется и огромным количеством приложений с малым количеством звезд и сомнительными авторами — к примеру QR-ридерами, файловыми менеджерами, оболочками для камер и т.п… Устанавливаешь приложение, читаешь через него код, нажимаешь на ссылку, вводишь конфиденциальные данные — и у приложения, как показано в предыдущем примере, появляется доступ к ним. А потом уже не отследишь, куда эти данные утекают. Поэтому для открытия ссылок пользуйтесь только браузерами, которым доверяете.

Есть сайты, которые запрашивают логин и пароль каждый раз. А есть такие, которые делают это редко — раз в месяц, раз в год. Как ни странно, второй вариант безопаснее с точки зрения утечки данных через WebView. Например, ты заходишь на сайт с какого-то левого браузера. Сайт требует логин и пароль, и тебе не кажется это странным – он всегда так делает. А в случае, когда авторизация требуется редко, это заставит насторожиться.

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

Познакомиться с примерами из этого поста можно через демо-приложения. На ОС Android нужно скачать Expo Project — инструмент для работы с JavaScript и React Native. После установки Expo останется только считать QR-код:

С устройствами под iOS сложнее: компания Apple запретила распространять приложения таким образом. Так что любопытствующим придется собрать приложение из исходников на GitHub. Спасибо за внимание!

Как создать простое WebView-приложение

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

Установка и настройка Android Studio

Скачиваем Android Studio с официального сайта developer.android.com/studio. Устанавливаем программу на компьютер. Все настройки оставляем по умолчанию.

После установки запускаем Android Studio. Программа предложит установить Android SDK. На этом этапе выбираем путь на английском языке.

Если выберем путь, в котором будут русские буквы, программа покажет ошибку.

Выбираем путь, нажимаем «Next». Дальше нажимаем «Finish». Начнется установка Android SDK на компьютер.

После установки Android SDK на стартовой странице программы нажимаем на Configure. Выбираем SDK Manager.

В открывшемся меню переходим во вкладку Android SDK (Appearance & Behavior → System Settings).

Снимаем галочку с Android 11.0 (R). Ставим галочку на Android 10.0 (Q). Переходим во вкладку SDK Tools.

Ставим галочку напротив следующих пунктов: Android Emulator, Android SDK Platform-Tools, Intel x86 Emulator Accelerator (HAXM installer). Нажимаем Apply.

Нажимаем Ok и принимаем пользовательское соглашение для каждого пакета.

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

Указываем и нажимаем Next.

Теперь пропишем переменная среды на компьютере и в Android Studio. Для этого нажимаем правой кнопкой мыши на «Мой компьютер». Выбираем «Свойства».

Нажимаем на «Дополнительные параметры системы» и выбираем «Переменные среды».

В поле «Переменные среды пользователя для User» нажимаем «Создать».

Указываем имя переменной ANDROID_SDK_ROOT и значение переменной (пример: D:твоя папкаAndroidStudioSDK). Нажимаем «ОК».

Создадим ещё одну переменную. Указываем имя переменной ANDROID_SDK_HOME и путь (пример: D:твоя папка AndroidStudioProjects).

Возвращаемся в Android Studio. Нажимаем на Configure и открываем Settings.

Переходим во вкладку Path Variables.

Создаём переменные среды, нажав на плюс.

Указываем имя переменной ANDROID_SDK_ROOT и значение переменной (пример: D:твоя папкаAndroidStudioSDK). Нажимаем «ОК».

Создадим ещё одну переменную. Указываем имя переменной ANDROID_SDK_HOME и путь (пример: D:твоя папка AndroidStudioProjects).

Нажимаем Apply и OK.

Теперь создадим виртуальную машину. Для этого нажимаем на Configure и открываем AVD Manager.

Нажимаем Create Virtual Device.

Выбираем модель телефона и скачиваем на компьютер.

Программа готова к работе. Переходим к созданию первого WebView приложения.

Создание WebView приложения

Открываем стартовую страницу программы. Создадим новый проект. Для этого нажимаем на Create New Project.

Выбираем стандартный шаблон Empty Activity.

Называем проект. Выбираем язык программирования Java и Minimum SDK (минимальная версия Android, которое будет поддерживать приложение).

Переходим в папку manifest и открываем файл AndroidManifest.xml.

Прописываем разрешения для доступа в интернет.

Перед application пишем код:

Переходим в res → layout. Открываем файл activity_main.xml.

Если нет кода, нажимаем Split в правом верхнем углу.

Удаляем стандартный текст кода.

Вместо него вставляем следующий код:

<WebView
android:id=»@+id/webView»
android:layout_width=»match_parent»
android:layout_height=»match_parent»
/>

Находим в папке java файл MainActivity.

Внутри скобок метода @Override вставляем код:

webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(«https://cpa.rip/»);

WebViewClient webViewClient = new WebViewClient() <
@SuppressWarnings(«deprecation») @Override
public boolean shouldOverrideUrlLoading(WebView view, String url) <
view.loadUrl(url);
return true;
>

@TargetApi(Build.VERSION_CODES.N) @Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) <
view.loadUrl(request.getUrl().toString());
return true;
>

В переменной webView.loadUrl вставляем URL, который будет открываться в приложении. Например, webView.loadUrl(«https://cpa.rip/»); .

Открываем файл AndroidManifest.xml. В конце тега application прописываем следующий код:

android:configChanges=»orientation|keyboardHidden|screenSize»

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

Если отключен автоматический импорт классов, делаем всё руками. Находим выделенные красным цветом фрагменты кода, наводим курсор и в сплывающей табличке нажимаем на Import class.

У всех созданных приложений по умолчанию стоят стандартные иконки. Чтобы их изменить, необходимо нажать правой кнопкой мыши на папку Res выбрать пункт New и перейти в Image Asset.

В графе Path нажимаем на иконку папки. Находим файл, который будем использовать в качестве иконки приложения.

Нажимаем Next и Finish.

Теперь посмотрим, работает ли приложение. Запускаем эмулятор.

Если всё хорошо, приложение запуститься.

Простое WebView приложение готово. Теперь создадим APK-файл.

В меню нажимаем на Build и выбираем Generate Signed Bundle/APK…

Выбираем APK и нажимаем Next.

Так как мы впервые создаём приложение, необходимо создать файл хранилища ключей для подписи приложения. Для этого в поле Key store path выбираем Create new.

В открывшемся меню в поле Key store path нажимаем на папку справа. Придумываем название. Дальше указываем пароли.

Ниже заполняем Имя, Фамилию, название компании, организации, город, регион, код страны в формате XX.

Нажимаем OK и Next.

В поле Destination Folder указываем путь, куда сохранить APK-файл. Ниже выбираем release и ставим обе галочки внизу.

Пождём несколько минут. В программе появится уведомление о готовности APK-файла.