Создание и установка простого приложения для Firefox OS

Всю прошлую неделю я использовал Geeksphone Keon в качестве своего единственного телефона. Никакого жульничества с запасным телефоном на Android и таскания с собой планшета (хотя дома я стал использовать его несколько больше). В целом впечатления положительные. Учитывая то, как я привык к приложениям на Android и сервисам Google, я сменил платформу удивительно легко. Так что могу порекомендовать купить Geeksphones и начинать создавать свои собственные сборки ОС, так как та, что идет из коробки совсем бедная.

Среди множества нужных приложений, которые отсутствуют в FirefoxOS (Spotify в моем списке — первое), таймер обратного отсчета. Несмотря на впечатление, которое производят интерфейсы приложений на Android написать приличный таймер не особенно сложно, так что я решил, что его написание — отличный первый шаг в создании мобильных приложений под эту платформу. По большей части это будет обычная веб-страничка, но мне хотелось что бы приложение казалось нативным, так что я отправился на сайт с готовыми элементами UI FirefoxOS, находящимися в открытом доступе. Я собирался искать там вкладки, заголовки и т.п., но на деле мне понадобились только стили для кнопки. Из информации на сайте не особенно очевидно, что эти элементы на самом деле находятся на GitHub и вы можете в них покопаться.

Написать приложение было просто, кроме, вероятно, вертикального выравнивания (для которого я использовал вложенные дивы и трюк с display: table-cell; vertical-alignment: middle;), но все немного усложнилось, как только я решил использовать новые API. А конкретнее, я хотел что бы таймер работал даже когда приложение находится в фоновом режиме и только в нем создавал уведомление об окончании отсчета. Для этого мне понадобилось использовать Alarm API, Notifications API и Page Visibility API.

Назначение Page Visibility API достаточно очевидно, и у меня не возникло никаких проблем с его использованием. Я использовал его что бы узнавать работает ли приложение в фоновом режиме (Переход в него происходит, когда вы закрываете приложение. По идее). Когда приложение переходило в фоновый режим я устанавливал с помощью Alarm API сигнал на время, которое осталось в этот момент на таймере, что бы своевременно вызвать приложение. Использовать его было весьма проблематично из за того, что оно плохо документировано (впрочем, сам код оказался очень простым). И наконец, я использовал Notifications API что бы уведомить пользователя, если приложение в фоновом режиме в момент, когда отсчет таймера заканчивается. Создавать уведомление оказалось достаточно просто, но я пока так и не выяснил как по клику на уведомление выводить приложение из фонового режима — понятия не имею где я ошибся, любая помощь приветствуется!

Последняя проблема — установка приложения на реальное устройство, вместо симулятора. Естественно симулятор позволяет установить приложение на телефон, но мне это не подошло, так как это бы означало необходимость запустить симулятор в виртуальной машине с Linux (у меня были причины этого не делать), для Windows пока нет необходимых для Geeksphone драйверов. В Firefox-маркет неоттестированное приложение мне отправлять не хотелось, так что я решил поступить иначе: у меня есть VPS и я решил выложить приложение туда, добавить соответствующий мета-тег и попробовать установить его оттуда, но к сожалению все оказалось не так просто.

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

if (navigator.mozApps) {
  var request = navigator.mozApps.getSelf();
  request.onsuccess = function() {
    if (!this.result) {
      request = navigator.mozApps.install(location.protocol + "//" + location.host + location.pathname + "manifest.webapp");
      request.onerror = function() {
        console.log("Install failed: " + this.error.name);
      };
    }
  };
}

Все пути к манифесту приложения и appcache должны быть абсолютными (можно не указывать хост, но вы не сможете установить путь относительно текущего директория). Последнее делает процесс сборки приложения весьма неудобным, если вы конечно не захотите хранить все в корневом директорие или создавать по виртуальному серверу для каждого приложения. Кроме того нужно убедиться, что на сервере настроен mime-тип для веб-приложений. Mozilla предоставляет отличный онлайн инструмент для проверки приложения, который позволит провести отладку.

Готово! (Ctrl+Shift+M что бы включить режим тестирования адаптивного дизайна в Firefox)

При посещении странички с подходящего устройства (любого с Firefox OS) вам предложат установить приложение. Не плохо для одной ночи! Можете поржать над исходниками и рассказать о том насколько они ужасны в комментариях.