Как в phonegap открыть внешнюю ссылку в webview

DmLisow

Apr 14 2019

КАК В PHONEGAP ОТКРЫТЬ ВНЕШНЮЮ ССЫЛКУ В WEBVIEW

При открытии ссылки привычным способом

newWin = window.open(strUrl, winName [, winParams])

или


  window.location.href = 'https://www.google.com';

в приложении, собранном через phonegap (cordova), происходит не то, что обычно хотят получить. Приложение предлагает открыть ссылку во внешнем установленном браузере на телефоне. Обычно же хотят, что бы контент по ссылке, отобрализся внутри WebView запущенного в данный момент приложения.

Когда решают такую простую задачу, то хотят решить её быстро и как можно проще. Поэтому рассуждают примерно так: Приложение на cordova(phonegap) - это просто браузер, значит можно в него загружать что захочешь. Но это не срабатывает. Дальше, после поиска в интернете различных способов, натыкаются на советы вроде прописать в файле конфига config.xml что-то вроде


<content src="https://вашсайт.com" />

Но, и такой способ не срабатыват, а приложение с завидным упорством "подхватывает индексный файл из папки www Всё это происходит из-за внутреннего "устрайства" window.open, приложения собранного в cordova(phonegap). А для того что бы была возможность открывать внешние ссылки внутри вашего приложения? и отображать содержимое внутри WebView текущего приложения следует использовать плагин cordova-plugin-inappbrowser

Подключение плагинов в phonegap

Соответсвенно, следующим вопросом встаёт задача о том, как подключаются плагины в cordova(phonegap). Ответ на него следует из того, будете ли вы собирать приложение в cordova, или же закинете zip папку с проектом в phonegap, что бы за ваш компьютер сделал это облачный сервис. Конечно же, для всех, у кого "слабые компьютеры" и обычные HDD диски, я настоятельно рекомендую, производить сборку через сервис phonegap.

Если вы собираете .apk на своей машине, то вам, во-первых, потребуется установить cordova CLI, а после при сборке, вручную подключать плагины, через команду cordova plugin add cordova-plugin-inappbrowser Но, самое главное для сборки .apk вам потребуется "подгрузить" пакеты для нужной версии android, которые и позволят скомпилировать приложение. Для тех, кто не успел потратить деньги на мощьные процессоры, процесс сборки рискует затянуться на десятки минут.

Для включения плагинов, которые есть в репозитории NPM, при сборке приложения в phonegap нужно лишь прописать в файле конфига config.xml что-то вроде: <plugin name="cordova-plugin-inappbrowser" />

логи сборки приложения в Phonegap

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

3 Политики безопасности

Нверное, открывая свой сайт в webview приложения, вы захотите сперва удостовериться, что на телефоне рабает интернет. Сделать это можно разными способами, в том числе и с помощью плагина inappbrowser. Но, к великому сожалению, на моём android 4.4 не захотели работать колбеки. Т.е. в самом плагине реаилизованы события на каждый случай - перед началом загрузки, после и т.п. Но, у меня они не заработали... Поэтому, было решено, для начала удостовериться, есть ли интернет, при помощи ajax запроса к серверу. В том случае, если бы серевер вернул правильный ответ - значит интернет работает, и можно загружать сайт. В проивном случае, можно отобразить надпись, "имеются проблемы с подключением". В принципе, всего этого можно и не делать, но тогда cordova-plugin-inappbrowser отобразит стандартную страницу, гласящую что невозможно загрузить сайт. Для того, что бы долго не возиться с AJAX, можно подключить библиотеку jQuery, и использовать $.get



$.get( "https://time.jsontest.com/?alloworigin=true", function( data ) {
		}).done(function() {
		// Загружаем, если сервер ответил валидно
			loadtowebview ()
		}).fail(function() {
		// Подключения нет (ну или сервер завис)
		var el = document.getElementById('stat_msg');
		el.innerHTML = "Отсутсвует подключение к интернету"
})

Как видете, $.get использует промисоподобную запись. Можно было бы самим написать функцию с промисами, или использовать fetch, но, в таком случае, приложение уж точно не будет рабоать на Android с версиями ниже 5. Так как там используется встроенный webview, и он не поддерживает последние новшества ES. Стоит конечно же, отметить, что вы можете собрать приложения с The Crosswalk Project, который будет использовать свой webview. Но, там тоже есть свои нюансы при сборке...

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

файл конфига - config.xml
тег Content-Security-Policy
Заголовки сервера

файл конфига - config.xml

Здесь вам нужно указать что-то вроде


  <access uri="*" subdomains="true" />
  <access origin="*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="https://*/*" />

Надеюсь что эти строки позволят "пропустить" запросы от вашего приложения к серверу...

тег Content-Security-Policy

Данный тег отвечает так же за возможность Ajax запросов и прочих запросов и загрузки контента...


   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: *">

Укажите эту строку, она разрешает любые запросы и любую загрузку.

Заголовки сервера

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


header('Access-Control-Allow-Origin: *');
header("Content-type: application/json; charset=utf-8");

Вообще, если вы, как и я, в своём примере делаете $.get запрос, что бы получить в ответ JSON, тогда в вашем PHP коде можно указать только header("Content-type: application/json; charset=utf-8"); и вернуть JSON данные. Но, лучше перестраховаться и указать всё что только указывается. Т.к. данный заголовк предназначен для браузера, в нашем случае для webview, а желания разбираться какая версия что предпочитает у меня нет. Поэтому, я обычно указываю максимально "свободную" политику.

Все три вышеперечисленные нюанса позволят вашему приложени делать запросы к серверу и получать от них ответ, и при этом не молчать как рыбаь в воде. Если у вас нет желания возиться с кодом PHP, то следуйте моему примеру, и отправьте $.get запрос на "https://time.jsontest.com/?alloworigin=true" - он выдаёт валидные заголовки и дату в формате JSON.

Какие нужны папки и файлы что бы собрать приложение в phonegap (cordova)

Перед тем как редактировать код приложения и загружать его в phonegap, у вас может возникнуть вопрос, в какой из этих папок следует вносить изменения, и что потом загружать. Для успешной компиляции нужно минимум 1 папка и файл конфига. На скриншоте они отмечены звёздочкой. Это всё. Все остальные папки и файлы нужны и крайне полезно, но... не обязательны. Единственное что, если вы в файле конфига укажете иконку, но не положите её в проект, то при сборке получится ошибка. Так что либо положите иконку, либо уберите эти строки из config.xml <icon src="/icon.png" //>

Это всё что нужно для успешной сборки под Android, а может быть даже и под Iphone

Финальный листинг

Наконец-то прописав эти 10 строк кода, указав все настройки безопасности и прочие мытарства, мы можем собрать всё воедино, и получаем код, необходимый для загрузки вашего сайта в webview. Как уже отмечалось ранее для сборки в phonegap нужно не много. Поэтому нам потребуется всего 3 файла + иконка.

config.xm
index.html
jQuery - библиоткеа. (вы же хотите использовать её методы для отправки запросов, и проверки интернета)


<?xml version='1.0' encoding='utf-8'?>
<widget id="com.businessapp.sitevisitor" version="1.0.0" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="https://cordova.apache.org/ns/1.0">
    <name>Накрутка счётчика посещений</name>
    <description>
        Обмен визитами на сайт
    </description>
    <author email="This email address is being protected from spambots. You need JavaScript enabled to view it." href="https://businessapp.trade/">
        Business App
    </author>
    <access uri="*" subdomains="true" />
    <access origin="*" />
		<allow-intent href="https://*/*" />
		<allow-intent href="ws://*/*" />
		<allow-intent href="wss://*/*" />
		<allow-intent href="https://*/*" />
		<allow-intent href="tel:*" />
		<allow-intent href="sms:*" />
		<allow-intent href="mailto:*" />
		<allow-intent href="geo:*" />
		
			<platform name="android">
				<preference name="android-minSdkVersion" value="14" />
				<preference name="android-targetSdkVersion" value="26" />
        
				<allow-intent href="market:*" />
				<allow-intent href="ws://*/*" />
				<allow-intent href="wss://*/*" />
  
				<access uri="*" subdomains="true" />
				<access origin="*" />
				<icon src="/icon.png" />
			</platform>
			
			<platform name="ios">
				<allow-intent href="itms:*" />
				<allow-intent href="itms-apps:*" />
				<preference name="BackupWebStorage" value="none" />
				<icon src="/icon.png" />
			</platform>
			
    <preference name="DisallowOverscroll" value="true" />
    <plugin name="cordova-plugin-whitelist" spec="~1.2.0" />
    <plugin name="cordova-plugin-console" spec="~1.0.1" />
    <plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
    <plugin name="cordova-plugin-inappbrowser" />
</widget>

config.xml


<html>
  <head>
  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: *">
    <title>Site Visitor</title>

	<script type="text/javascript" charset="utf-8" src="/jquery-3.4.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/cordova.js"></script>
		<script type="text/javascript" charset="utf-8">
		// Ждём загрузки API устройства
		function onLoad() {
			document.addEventListener("deviceready", onDeviceReady, false);
			console.log('устройстов готово')
		}
		// API загрузились...
		function onDeviceReady() {
			// Все необходимые библиотеки загрузились и их можно использовать
			go()
		}
		// Загрузка сайта в WebView
		function loadtowebview () {
		  window.open = cordova.InAppBrowser.open;
					var el = document.getElementById('stat_msg');
					el.innerHTML ='Начинаем загрузку'
					cordova.InAppBrowser.open('https://businessapp.trade', '_self',  'location=no, toolbar=no, hidenavigationbuttons=yes,  zoom=no');
					}
		// Проверяем доступен ли интернет			
		function go () {
			var el = document.getElementById('stat_msg');
			el.innerHTML ='Проверка связи';
				$.get( "https://time.jsontest.com/?alloworigin=true", function( data ) {
				}).done(function() {
					el.innerHTML ='Проверка связи'
					loadtowebview ()
				}).fail(function() {
				noinet ()
			})
		}
		var noinet = function () {
			var el = document.getElementById('stat_msg');
			el.innerHTML = "<h3>Отсутсвует подключение к интернету</h3><br><input type=button value='перезагрузить' onclick='go()'>"
			document.getElementById('preloaderimg').src = 'noinet.png'
		}
		</script>
		<style>
		.msg_wrap {
		display:flex; width:100%; height:100%; justify-content: center; align-items: center; flex-direction: column;
		}
		body {
		background: #2a80b9; width:100%; height:100%;
		}
		#stat_msg {
		color: antiquewhite;
		font-size: larger;
		display: flex;
		flex-direction: column;
		}
		#stat_msg input {
		height: 50px;
		}
		</style>
  </head>
  <body onload="onLoad()"  >
	<div style="display:flex; width:100%; height:100%">
		<div class="msg_wrap">
			<div id="stat_msg">
			</div>
			<div>
			<img id='preloaderimg' src="/preloader1.gif" width="400px">
			</div>
		</div>
	</div>
  </body>
</html>