PhoneGap ChildBrowser плагин

Автор: Eugeniy Marilev
Дата публикации: 2014-05-06 10:30:17

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

Итак, что это за плагин? Представьте, что ваше приложение на phonegap реализует web-поиск, например, в Google, результаты отображаются в виде списка. Например, нам нужно, чтобы по клику на результат поиска открывалась ссылка в браузере. В принципе это легко реализуется и так ядром библиотеки PhoneGap, но по умолчанию все ссылки открываются в браузере по-умолчанию, то есть при нажатии на ссылку открывается отдельное приложение (на Android — Chrome, на IOS — Safari). Есть ряд фактов, которые выступают против стандартного способа обработки ссылок:

  1. При открытии нового приложения в IOS предыдущее открытое сворачивается в трей (IPhone 4G), либо вообще закрывается (IPhone 3G)
  2. Приложение теряет контроль над дальнейшей обработкой пользовательских операций.

Именно для этого и был разработан ChildBrowser плагин. Вот перечень его возможностей:

  • Открыть ссылку в стандартном браузере.
  • Открыть ссылку в дочернем браузере.
  • Закрыть окно дочернего браузера.
  • Callback для переадресаций внутри дочернего браузеры.

Рассмотрим далее подробнее каждую из вышеприведенных функций подробнее.

Открыть ссылку в стандартном браузере

window.plugins.childBrowser.openExternal(url, [usePhoneGap = false])

- открывает окно стандартного браузера и загружает в нем адрес "url", Параметр usePhoneGap определяет использование механизма white list (списка доверенных адресов) вашего приложения.

Открыть ссылку в дочернем браузере

window.plugins.childBrowser.showWebPage(url, [options])

- открывает окно дочерний view для главного view вашего приложения, который стандартным механизмом PhoneGap может общаться с приложением. Дочерний view можно назвать еще всплывающим диалогом. Данный функционал обычно используется вместо стандартного javascript подхода для открытия дочерних окон — window.open. Перечень опции метода "showWebPage" пока еще довольно короткий: "showLocationBar" (true/false) — показывать или нет навигационную панель браузинга (поле адреса, кнопки назад, вперед, обновить страницу).

Закрыть окно дочернего браузера

window.plugins.childBrowser.close()

- закрывает окно дочернего браузера. Данный метод нельзя вызывать напрямую в любой секции javascript кода. Вызов метода разрешается только внутри callback'а "onLocationChange", который будет описан далее.

Callback'и дочернего браузера

onClose()

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

onLocationChange(location)

— вызывается при каждом изменении адреса веб-документа дочернего браузера. Возможно вышеприведенный описание будет дополнено в более поздних версиях ChildBrowser плагина, но для написания статьи использовалась информация о плагине совместимом с Phonegap 1.2.0 — 1.4.0.

Установка и использование childBrowser плагина

Ну а теперь приступим к реализации простейшего, но полноценного примера работы с плагином childBrowser. Итак, скачиваем исходники плагина. Как и всегда у него есть две части: javascript и native wrapper. Native обертку кидаем в проект — он будет компилироваться и включаться в приложение как обычный класс. Javascript обертку кидаем в ресурсы или ассеты, подключаем в html документе приложения. Далее, перед использованием плагина на этапе выполнения его нужно установить. Установка плагина есть необязательная операция для всех мобильных платформ, но, например, для IOS это обязательное требование. Делается это в javascript обработчике события "deviceready", и вот, все уже готово к использованию:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <link rel="stylesheet" href="phonegap.css" type="text/css"/>
            <title>Childbrowser Gap</title>         
            <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
            <script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
            <script type="text/javascript" charset="utf-8">
                function onDocumentReady() {
		     if (document.addEventListener) {
    		         document.addEventListener('deviceready', 				onDeviceReady, false);
		     } else {
    			 document.attachEvent('deviceready', onDeviceReady, false);
		     }
                }
		function onChangeBrowserLocation(location) {
		     if (location.indexOf('maps.google.com') != -1) {
			 window.plugins.childBrowser.close();
		     }
		}
		function onBrowserClose() {
		     alert('child window closed');
		}
                function onDeviceReady() {
		     //для некоторых платформ данный метод не определен.
                     if (ChildBrowser.install) {
			 ChildBrowser.install();
	             }
		     window.plugins.childBrowser.onLocationChange = onChangeBrowserLocation;
		     window.plugins.childBrowser.onClose = onBrowserClose;
                }
                function openChildBrowser(url) {
                     try {
                         window.plugins.childBrowser.showWebPage(url);
                     } catch (err) {
                         alert(err);
                     }
                }
		function openExternalBrowser(url) {
                     try {
                         window.plugins.childBrowser.openExternal(url);
                     } catch (err) {
                         alert(err);
                     }
                }
                </script>
            </head>
            <body onload="onDocumentReady()">
                <button onclick="openChildBrowser('http://www.google.com');">Open Google in child window</button> 
		<button onclick="openExternalBrowser('http://www.google.com');">Open Google in default browser</button> 
    </body>
</html>

Данный пример демонстрирует открытие страницы поиска Google по нажатию на «Open Google in child browser». При переходе внутри дочернего браузера на страницу Google Maps дочернее окно должно закрываться и показываться сообщение "child window closed". В реальных приложениях на PhoneGap этот плагин просто незаменим. И, к счастью, он работает хорошо во всех мобильных платформах, даже на Windows Phone 7 (для этой платформы переписано пока еще очень мало плагинов). Например, в моих приложениях, плагин используется для аутентификации к facebook во всплывающем окне. Если вы скажете: "Зачем это, ведь есть специальный плагин Facebook Auth Dialog?", то я отвечу: он поддерживается только IOS и Android, и кроме, это только для Facebook... А если захочется сделать аутентификацию, например, к Vkontakte? Плагин реально классный и незаменимый, в общем дерзайте...

Комментарии к статье
Комментарии:
Aleksandr
13\05\2012
Спасибо! Данный плагин будет играть важную роль в моём приложении.
Только зарегистрированые пользователи могут оставлять комментарии