Поддержка JavaScript на мобильных устройствах

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

Функция обнаружения

Самый простой способ обнаружить, доступно ли какое-то свойство, API, объект или функция — это сделать запрос при помощи простого оператора if:

	if (object) {
	// Object available
	}

Например:

	if (document.getElementById) {
	// DOM function available
	}

Даже в тех мобильных устройствах, где есть поддержка JavaScript, он вполне может не работать из-за настроек пользователя или компании, если речь о корпоративном подключении (как пример — устройства BlackBerry). Всегда делай и не-JavaScript вариант функционала твоего сайта.

Стандартные диалоговые окна

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

Рис. 8.1. Используя стандартные JavaScript диалоги вы получите бесплатный богатый и мультиплатформенный интерфейс, используя элементы управления пользовательского интерфейса от операционной системы

Список доступных диалоговых окон:

• alert для отображения сообщения;
• confirm для получения от пользователя подтверждения действия;
• prompt для получения от пользователя строки;
• print для отправки веб-страницы на печать;
• find для вызова функции поиска в браузере.

Диалоговое окно find не входит в стандарт, но работает практически во всех не-IE декстопных браузерах. Это диалоговое окно получает три дополнительных параметра: текст, который нужно найти, чувствительность к регистру (boolean) и фложок направления поиска (boolean). В целом нужно избегать использования этого окна в мобильных браузерах. В большинстве их них вообще нет функции поиска.

Диалоговое окно print несовместимо с мобильными устройствами и браузерами по очевидным причинам, но alert, confirm и prompt вполне работают практически на каждом мобильном телефоне с поддержкой JavaScript (таблица 8.3). При необходимости можешь их спокойно использовать. Использование стандартного диалогового окна всегда быстрее, проще и вызывает меньше всяких проблем, чем применение какого-нибудь другого решения для той же самой задачи.

Типичные проблемы с диалоговым окном alert (и с другими окнами тоже) возникают с переводом каретки для многострочного текста и с отображением слишком большого по объему для этого пространства текста. Для решения первой проблемы в декстопном JavaScript применяется специальный символ «n». Есть и другие специальные символы, использование которых следует избегать, например табуляция «t». Давай посмотрим, как обстоят дела с обеими проблемами в мобильных браузерах. В таблице 8.4 информация о поддержке возможности добавления новых строк и большого по объему текста в диалоговые окна, а на рисунке 8.2 показано, как к длинному тексту применяется область прокрутки.

Рис. 8.2. На некоторых браузерах, большие окна alert имеют полосы прокрутки (или могут прокрчиватся касанием на touch устройствах).

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

Запись в документ

Функция document.write дает возможность динамического создания HTML-кода во время его рендеринга. В 90-е это был очень популярный метод, но сейчас есть много минусов для его применения в современных сайтах. Сегодня больше применяется манипулирование документом при помощи DOM после события onload.

Если ты в своем скрипте не используешь document.write, то тогда нужно применять атрибут сценария defer=»defer». Браузерам с наличием соответствующей поддержки этот атрибут скажет, что не нужно ждать загрузки или выполнения скрипта для продолжения рендеринга документа.

В мобильной разработке чтобы избежать проблем с выполнением операции document.write, иногда все же лучше не применять DOM (особенно это касается low-end устройств). Из таблицы 8.5 видно, что этот метод все еще работает во многих браузерах.

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

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Document Write</title>
		<script type="text/javascript">
			function createNumericSelect(name, from, to) {
			var html = "<select name='" + name + "'>";
			for (var i=from; i<to; i++) {
			html += "<option>" + i + "</option>";
			}
			html += "</select>";
			document.write(html);
			}
		</script>
	</head>
	<body>
		<form action="send">
			<script type="text/javascript">
				createNumericSelect('year', 1990, 2020);
			</script>
		</form>
	</body>
</html>

Помни, что в обработчике событий document.write лучше не использовать, иначе результаты могут быть крайне неприятными. Для динамической генерации контента на странице, вместо document.write лучше использовать DOM.

Обнаружение платформы

В JavaScript доступен объект navigator который дает нам информацию о браузере пользователя. О технике серверного обнаружения мы поговорим позже, а пока попробуем использовать этот метод для обнаружения типа устройства пользователя.

При использовании for не забудь определить индексную переменную локально var i=initial_value. Если так не сделать, то будет использоваться глобальная переменная, что повлечет за собой дополнительные ошибки и проблемы с производительностью.

У объекта navigator есть множество свойств, но но нас больше всего интересуют свойства appName (имя браузера), appVersion (версия браузера), mimeTypes (массив поддерживаемых типов MIME), plugin (поддерживаемые плагины для тега <object>), platform (операционная система) и userLanguage.

Мы будем использовать функцию работы со строками indexOf, чтобы убедится, что у этих атрибутов такие значения, которые нам нужны. Например:

// Detects if it is an Android device
var android = (navigator.platform.indexOf("android")>=0);
if (android) {
// Do something
}

В таблице 8.6 показано, какие значения возвращаются для каждого браузера. В Таблице мы допускаем, что User Agent будет заменен на ID агента пользователя каждого устройства.

Размер окна

В JavaScript есть два объекта, которые относятся к размерам: document.documentElement и screen. Первый относится к размеру области просмотра документа, а второй — к экрану устройства в целом. На момент написания этой статьи не было браузера, который бы допускал использование окон по размеру меньше экрана самого устройства. На многих устройствах мы можем применять веб-виджеты для определения своего экрана, но это уже совсем другой способ и мы поговорим о нем позже (Глава 12).

В устройствах BlackBerry есть глобальная переменная — blackberry — у которой есть два объекта: location и network. location мы рассмотрим позже, а сейчас разберемся со вторым свойством: благодаря network мы можем узнать, каким типом подключения пользуется клиент — WiFi, GPRS, EDGE, CDMA или какой-нибудь другой сетью. В браузере Android (начиная с версии 2.2) есть аналогичное свойство navigator.connection.type.

У объекта screen есть четыре свойства: width, height, availWidth и availHeight. Последние два характеризуют размер доступного пространства между панелями инструментов в определенной операционной системе. В мобильной разработке это, в принципе, то же самое, что и обычные width и height.

Чаще всего данные о размере окна получаются при помощи document.documentElement.clientWidth и document.documentElement.clientHeight.

Единственный способ изменить значения этих свойств после загрузки страницы — это изменить ориентацию экрана (например, с портретного на альбомный). В таблице 8.7 указаны браузеры, в которых возможно получить данные о размере экрана и окна в мобильном устройстве, а также информация о тех браузерах, где доступно изменение ориентации страницы (портретный/альбомный).

История и управление URL

В JavaScript для управления историей браузера используются объекты location и history. У объекта location есть несколько свойств, например, href для полного URL и hash для анкоров (часть URL, которая находится после #). Изменение свойства location.href перенаправит браузер на другую страницу (если устройство поддерживает такую возможность). Есть два хороших способа: reload() для перезагрузки той же самой страницы и replace(url) — без новой записи в истории отправляет пользователя на другую страницу.

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

У объекта history есть несколько не очень нужных свойств и три метода: back(), go(number) и forward(). Метод back() обычно используется для эмуляции кнопки «Назад»:

	<!-- As a button -->
	<input type="button" onclick="history.back()" value="Back" />
	<!-- As a link -->
	<a href="javascript:history.back()">Back</a>

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

В таблице 8.8 демонстрируется, что происходит, если попробовать при помощи JavaScript управлять history и location.

Управление окнами

В JavaScript одна из самых популярных (и одновременно раздражающих) функций — это использование window.open для открытия стандартного pop-up окна. По разным причинам этот метод не очень подходит для мобильных браузеров. Многие браузеры вообще не могут открывать сразу несколько окон (на рисунке 8.3 показан, правда, тот, который может) и мы не можем определить атрибуты для всплывающих окон — каждое окно будет открываться в полный размер (как главное).

Рис. 8.3. Браузер Android является одним из немногих способных открывать всплывающие окна с подоконным дизайном.

Связь между основным и pop-up тоже часто работает не совсем корректно. Ну и закрывать всплывающие окна в некоторых браузерах может быть весьма проблематично, ведь они могут воспринимать всплывающее окно как обычное, а window.close работает только в pop-up.

Поэтому, если есть такая возможность, то не используй pop-up окна. Если же по каким-то особым причинам тебе без этого никак, то делай так, чтобы окно открывалось после события onclick (избегай открытия окно по событию onload или при помощи таймера и помни, что пользователи некоторых mid- и low-end устройств окно в таком случае не увидят.

Есть вариант получше: использовать ссылку с target=»_blank». На мобильных устройствах результат будет такой же, как и при использовании window.open, а работать будет во всех браузерах. Если в браузере нельзя открывать сразу несколько окон, тогда просто будет заменено текущее.

В таблице 8.9 показано, как в различных браузерах обстоят дела с обработкой window.open

Управление при помощи фокуса и прокрутки

Используя функцию focus, ты можешь задать фокус для каждого кликабельного DOM элемента (или ссылки, формы, кнопки). Лучше всего такой способ применять для элементов форм. Сценарий поведения будет меняться в зависимости от браузера. В некоторых сенсорных устройствах при попадании текстового поля в фокус должна автоматически открываться экранная клавиатура, а в некоторых браузерах с курсор-навигацией, курсор будет перемещен на элемент.

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

На некоторых устройствах у глобального объекта window есть фукнция scrollTo, которая принимает два значения — xPosition и yPosition с указанием позиции относительно верхнего левого угла экрана. В некоторых устройствах (например, iPhone) используется scrollTo, который эмулирует скроллинг со стороны пользователя и скрывает панель браузера (эффект такой, как если бы пользователь сам прокручивал при помощи пальцев). Для iPhone-браузеров часто используется такой код, который после события onload автоматически скрывает панель инструментов браузера:

	window.scrollTo(0, 1);

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

	<a href="javascript:window.scrollTo(0, 1);">Go to Top</a>

В таблице 8.10 можешь посмотреть, какие браузеры поддерживают функции focus и scrollTo.

Таймеры

JavaScript предлагает нам два типа таймеров: setTimeout и setInterval. Первый тип таймера применяется единожды, а второй будет выполняться каждые n секунд, пока его действие не будет остановлено при помощи clearInterval.

Ты можешь использовать таймеры для создания анимации, управления периодом тайм-аута в определенной операции, а также, используя Ajax, таймер можно применять для обновления каждые n секунд информации с сервера.

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

Первый вопрос, на который ты должен ответить: что происходит с сайтом, когда пользователь переводит фокус на другое приложение (актуально в многозадачных операционных системах) или открывает новое окно или вкладку? Второй момент: что происходит с нашим приложением/сайтом, если телефон переходит в ждущий режим (из-за отсутствия активности пользователя). Скрипт все еще может продолжать выполняться. А это не очень хорошо. Учет таких ситуаций усложняет поведение таймера.

С таймерами есть еще одна проблема — они выполняются в том же потоке, что и основной скрипт. Если твой скрипт требует слишком много процессорных ресурсов и времени на его обработку (что часто бывает с большими скриптами на low- и mid-end устройствах), то запуск таймеров будет отложен, пока не появятся свободные ресурсы.

Если для таймера мы будем использовать очень высокую частоту (например, 10 миллисекунд) то у таймера, скорее всего, возникнут проблемы с обработкой действий.

Помни, что скорость обработки JavaScript во многом зависит от возможностей самого устройства и движка браузера. Даже если разные устройства работают на одной и той же операционной системе, например у Android, время обработки все равно будет отличаться: HTC G1, например, работает намного медленнее, чем Nexus One с процессором в 1-Ghz.

Давай рассмотрим простой пример и разберемся, что обычно происходит, когда веб-страница переходит в фоновый режим:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Using Timers</title>
	</head>
	<body>
		<script type="text/javascript">
			var timer = setInterval(timerHit, 200);
			var q = 0;
			var lastTime = new Date().getTime();
			function timerHit() {
			q++;
			var deltaTime = new Date().getTime() - lastTime;
			document.getElementById("content").innerHTML += q + ": " +
			deltaTime + "<br />";
			lastTime = new Date().getTime();
			// Generate some random delay
			var randomNumber = Math.floor(Math.random()*1000)+5000;
			for (var i=0; i<randomNumber; i++) {
			var a = new Array();
			}
			// We will run only 15 experiments
			if (q==15) {
			clearInterval(timer);
			}
			}
		</script>
		<div id="content">
		</div>
	</body>
</html>

Как видно на рисунке 8.4, на разных устройствах реальное время выполнения сильно отличается. На low и mid-end устройствах если скрипт вообще работает, то время его обработки далеко от нужных нам 200 миллисекунд — некоторые low-end устройства не могут работать с таймерами с частотой меньше 1 секунды.

Рис. 8.4. Таймеры не всегда будут иметь ту частоту, которую мы хотим.

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

Команда разработчиков Gmail для мобильных обнаружила некоторые проблемы с поведением таймера на мобильном Safari и Android-устройствах и опубликовала результаты своих экспериментов в блоге группы http://www.mobilexweb.com/go/timers. Суть сообщения такова: с низкочастотными таймерами (1 секунда и больше) нет никаких проблем с производительностью и их ты можешь использовать столько, сколько тебе нужно; с высокочастотными таймерами (например, 100 мс) ситуация другая — каждый следующий таймер «затормаживает» интерфейс. Лучше всего использовать только один высокочастотный таймер.

Выход из спящего режима

Как мы уже говорили, в большинстве устройств работа таймеров (да и вообще всего JavaScript) приостанавливается, если страница переходит в фоновый режим. У меня iPod Touch и в Safari на одной из восьми возможных вкладок у меня всегда открыта моя электронная почта. Когда я хочу перейти на другой веб-сайт, просто открываю новую вкладку, но предыдущая вкладка с электронной почтой также остается открытой. И это значит что она может оставаться в фоновом режиме в течении нескольких часов или даже дней, пока я снова не вернусь к этой вкладке. И как разработчика меня интересует один вопрос: когда моя страница находится фоновом режиме, как мне определить, когда ей нужно из этого режима выйти?

Нил Томас (Neil Thomas) разработчик программного обеспечения от Google (работает в команде Gmail for Mobile) предложил очень простое и очень умное решение, суть которого в использовании высокочастотного таймера и глобальной переменной для расчета времени между обращениями к этому таймеру. Поскольку в спящем режиме информация о временных промежутках между вызовами к таймеру не передается и если во время следующего обращения к таймеру временной промежуток между последними запросами больше определенного порога, то это значит, что приложение или страница только что вышли из спящего режима.

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

Вот пример код Нила Томаса (с некоторыми дополнениями от меня). Объяснения к коду можно найти на http://www.mobilexweb.com/go/timers:

	// The time, in ms, that must be "missed" before we
	// assume the app has been put to sleep.
	var THRESHOLD = 10000;
	var lastTick_;
	var detectWakeFromSleep_ = function() {
	var now = new Date().getTime();
	var delta = now - this.lastTick_;
	if (delta > THRESHOLD) {
	// The app probably just woke up after being asleep.
	notifyWakeFromSleep(delta/1000);
	}
	lastTick_ = now;
	};

В методе notifyWakeFromSleep ты можешь принимать решение о своих дальнейших действиях, опираясь на полученные значения параметров, которые скажут тебе, сколько прошло секунд со момента фиксации последнего активного состояния. В зависимости от длительности этого временного промежутка — 10 секунд или 1 день (86 400 секунд) — варианты твоих действий могут отличаться. Например, после перерыва в один день можно показать предупреждение или загрузить анимацию, пока при помощи Ajax загружаются новые результаты.

Есть еще такая ситуация, когда выход из спящего режима будет для приложения или страницы невозможен. Речь идет о тех случаях, когда оперативная память устройства заполнена, наша страница находится в фоновом режиме и вполне возможно, что, в таком случае, браузер удалит эту страницу и когда пользователь вернется к просмотру — браузер заново загрузит ее с URL.

Помни, что при выходе из спящего режима документы и скрипты (в том числе и HTML контент и переменные JavaScript) находятся в том же состоянии что были и до этого. В iOS до версии 4.0 нет поддержки многозадачности, но в Safari запоминает и хранит последнее состояние окна, даже когда сам браузер закрыт.

Изменение заголовка

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

По некоторым причинам динамическое изменение заголовка не очень хорошая идея для мобильных браузеров:

• многие браузеры вообще не отображают заголовок;
• если пользователь одновременно работает с несколькими вкладками, то в фоновом режиме от динамического изменения заголовка не будет никакого толку — страница-то «заморожена»;
• анимация в заголовке в мобильном браузере может попросту раздражать.

Регулярные выражения

Регулярные выражения — отличный способ валидации введенных данных или выполнения других задач. Регулярные выражения были включены в стандарт JavaScript 1.5, но в некоторых low- и mid-end устройствах их алгоритм может не поддерживаться. Тем не менее, как можешь убедиться из таблицы 8.12, эта технология очень хорошо поддерживается в браузерах.

Управление Cookie

Cookie — хорошее решение проблемы несохраняющихся состояний в HTTP. Как можешь увидеть в таблице 8.13, cookie работают практически на всех современных устройствах. И это хорошо. Плохо только то, что в мобильной экосистеме время жизни cookie может быть гораздо короче, чем в декстопном мире, особенно на low- и mid-end устройствах из-за крайне ограниченных объемов памяти.

Для лучшей совместимости с мобильными устройствами cookie не должны превышать 2 KB.

Cookie обычно хранятся и считываются на сервере, но возможности JavaScript позволяют нам считывать и описывать их как механизм хранения на клиенсткой стороне. Из таблицы 8.13 понятно, что все основные платформы поддерживают управление cookie из кода скрипта.

Куда дальше

• следующая — DOM
• предыдущая — Написание JavaScript для мобильных браузеров
• содержание