Выполнение 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-логика нашего приложения
    }
    

    Only registered users can participate in poll. Log in, please.

    Интересны ли подобные небольшие заметки?

    • 71.2%Интересны, пишите еще!79
    • 28.8%Спасибо, больше не надо!32
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 5

      0
      Вот бы демо.
        0
        Могу позже сделать отдельный пост на эту тему. Но вроде бы и так все предельно понятно?
        0
        На всякий случай упомяну, что нативные плагины PhoneGap в браузере работать в любом случае не будут.
        Кстати, для отладки еще можно использовать плагин к хрому Ripple (https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc)
          0
          Да, естественно не будут работать нативные фишки фонгапа. Их тоже придется обернуть заменами. Будет некоторый оверхед. Например вызов интерфейса камеры можно красиво заменить вызовом диалога загрузки файла.
          0
          PhoneGap интересная штука, и думаю перспективная (Adobe не зря им занимается).

          Когда то экспериментировал на CoffeeScript для него:

          ASCII Сокобан:
          github.com/nemilya/phonegap-game-sokoban

          Думаю всё сделать когда-нибудь пост про создание сокобана на CoffeeScript )

          Only users with full accounts can post comments. Log in, please.