Выполнение PhoneGap-приложений в десктопном браузере

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

Зачем открывать мобильные приложения в браузере?

Причин — две: 1) для отладки, 2) для демонстрации. Про первое понятно. Вторую возможность разработчики применяют не часто, но встретить можно.

Используя незначительно доработанное PhoneGap-приложение, можно демонстрировать на промо-сайте не просто скриншот, а реально работающую JS-динамику. То есть обернуть PhoneGap-исходник в iframe, поместить внутрь графического вида какого-нибудь очередного айфона и вуаля. Некоторый wow-фактор и копейка к конверсии гарантированы.

Что нужно менять?

Включение в HTML cordova.js на десктопе дает кучу ошибок, мобильное же приложение без этого включения будет не работоспособно. Стартовать JS логику на десктопе и на мобилке нужно по разным событиям. Если стартовать JS-логику на мобилке стандартным событием domready, получим лишние всплывающие вопросы при попытке использования GPS-навигации.

Обычный подход

Самое простое — сделать два варианта исходников. 1) для мобилки: HTML с включением cordova.js + JS со стартом по срабатыванию события deviceready и 2) для браузера: без cordova.js + JS со стартом по событию domready. И комментить/раскомментить потом небольшие кусочки перед каждой сборкой. Довольно быстро надоедает.

Решение

Всегда включем cordova.js в HTML, но удаляем сам файл cordova.js из дерева проекта. При сборке проекта PhoneGap Build сервер сам подставит в дерево нужный JS-файл, а при открытии из браузера в консоль просто выплюнется одиночная ни на что не влияющая ошибка загрузки JavaScript. Старт JS-логики осуществляем следующим образом:

if( window.cordova ) {
    document.addEventListener( 'deviceready', start, false );
} else {
    $( start );
}

function start() {
    // Здесь начинается JS-логика нашего приложения
}