Разрабатывая мобильное приложение, я обнаружил пару вещей, знания о которых мне бы пригодились, когда я начинал. Поэтому я решил написать статью в формате небольших советов. Эти советы больше нацелены на разработку мобильных приложений под PhoneGap, Windows 8 и Firefox OS. Но разработчикам мобильных веб-сайтов тоже могут пригодиться. В конце статьи дам ссылки на то, что в конце концов получилось
Не доверяйте медиа-селекторам.
Особенно, на Android. Медиа селекторы срабатывают при использовании клавиатуры и приходится хендлить и это. Это стает настоящим адом, если наше приложение имеет разный вид для Portrait и Landscape. Хорошо демонстрирует это следующий пример:
Если мы откроем наш пример на телефоне с высотой разрешения 800px и больше, то не увидим цветного блока, т.к. к нему применяется медиа селектор, но когда мы нажимаем на input, чтобы ввести данные, открывается клавиатура и блок появляется(изменяется высота окна), что является немного не логичным течением дел. Решение: Использование Javascript для смены ориентации и смена ориентации на основании свойств screen.availWidth и screen.availHeight. Учтите, что эти свойства не работают в FirefoxOS, как и эвент orientationchange. Подобный код может помочь нам сэкономить немного времени и сил.
var displayModeLandscape = false;
var width = 0;
var height = 0;
var setPortrait = function() {
$('html').addClass('portrait').removeClass('landscape');
displayModeLandscape = false;
};
var setLandscape = function() {
$('html').addClass('landscape').removeClass('portrait');
displayModeLandscape = true;
};
var currentOrientation = function() {
width = screen.availWidth || $(window).width();
height = screen.availHeight || $(window).height();
if(height > width) {
setPortrait();
} else {
setLandscape();
}
};
$(window).on(‘orientationchange’, currentOrientation);
currentOrientation();
Расширьте reset.css
К стандартному reset.css будет полезно добавить стиль переопределяющий выделение елементов при тапах. Это выглядит не кравсиво и не нейтив
*:not(html)
{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}Используйте графическое ускорение.
Для оптимизации анимаций в вашем приложении вам пригодятся свойства, которые поддержнивают графическое ускорение. К ним относятся: transform, opacity. Обратите внимание на css свойство transform и постарайтесь использовать его как альтернативу left, top, right в случае, если вы собираетесь делать transition этих свойств. Transform работает гораздо быстрее.
Используйте тапы, а не клики.
Я уже писал о задержке в 300мс при обработке кликов в мобильных браузерах. Поэтому используйте эвенты тачей и тапов для обработки нажатий на элементы. Про жесты больше в соответствующей статье
Как видно из примера разница между обработкой тач-евентов и клик-евнтов на десктопе составляет ~100 мс и ~400 на мобильных браузерах
LocalStorage и Caching
Используйте LocalStorage для кеширования информации пользователя, а также для хранения инфорации на устройстве. LocalStorage – persistant хранилище и остается при обновлении приложения. Но не забывайте о ограничениях, например, максимальный размер на iOs – 5MB или о том, что версия webkit на Android < 3.2 выбрасывает исключение при JSON.parse(null), все остальные бразуеры возвращают null.
Используйте подходящий инструментарий.
Используйте подходящий браузер для тестирование приложений. Если вы разрабатываете приложение под Android или iOS используйте Chrome, под Firefox OS – Firefox, под Windows 8 – IE10.Для разработки игр и приложений с большим количеством анимации также будет полезна библиотека https://github.com/mrdoob/stats.js/ Или вы можете использовать встроенный в Chrome FPS counter. Нужно всего лишь зайти в chrome://flags/ и включить его.Так же Chrome имеет эмуляцию тапов – это бывает очень полезно в дебаге жестов.
Запрещайте масштабирование
Вставив в тег head следующий тег вы запретите масштабирование и получите возможность трекать жесты.
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">Оптимизация жестов.
Запускайте preventDefault() и stopPropagination(), когда обработка жестов вам уже не нужна, чтобы увеличить производительность приложения.
Оптимизруйте свой код.
Все вышесказанное не будет иметь смысла, если ваш код будет выполняться безумно долго. Используйте Profiler чтобы найти тонкие места, старайтесь как можно меньше обновлять DOM и всегда удаляйте или скрывайте (display: none) ноды, которые не используете. Чем больше у вас DOM, тем медленнее происходят операции с ним.
Вместо послесловия
Ну и в конце вы можете посмотреть на приложение в живую на Google Play
Автор: sagens
