Pull to refresh

Сам себе АппСтор

Reading time 3 min
Views 823
image

Хабростарожилы могут припомнить часы Синхрон, о которых однажды уже шла речь на Хабре.

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

Дошла очередь и до мобильной платформы. Так или иначе, целью стала iOS.

Как известно, современный путь на эту платформу лежит через Xcode и AppStore, что требует определённых душевных и финансовых вложений.

Однако, если припомнить смутное время выхода первого (точнее второго) «КПК» от яблочной компании (на всякий случай, речь про iPhone 1), то вспомнится бурная дискуссия, о том, как же так можно, чтобы приложения для него были ничем иным как простыми web-приложениями — обычным нагромождением HTML/CSS/JS и тому подобным. Как раз то, что нам и нужно!

Экшен

Исходные данные:
index.html — что тут скажешь, обычный такой себе HTML5;
sinchron.js — собственно суть всего приложения — часы «Синхрон», написаны на JavaScript и Canvas (была и версия на SVG).
В index.html настроены стили, их немного, поэтому нет нужды создавать отдельный CSS. Подключаем выше упомянутый sinchron.js, и пишем запуск часов сразу по загрузке страницы.
Открываем в Safari, тестируем, смотрим: всё ли работает как надо.

Порядок?! Тогда переходим к портированию. Чтобы получить полноценное приложение следует предпринять несколько шагов.
Во-первых, нужно чтобы приложение работало и без интернета.
Для этого воспользуемся механизмом хранения данных на клиенте. Нам потребуется создать манифест (manifest) со списком ресурсов, которые нужно сохранить в кеше приложения. После первой загрузки такого приложения, описанные в манефесте ресурсы, в последствии будут доступны из кеша, без обращения к серверу.

Есть ряд требований к манифестам:
  • Они должны иметь тип text/cache-manifest (требуется настройка web-сервера)
  • Первой строкой должен идти текст «CACHE MANIFEST»
  • Последующие строки могут быть как комментариями так и URL требуемых ресурсов
  • Комментарии должны быть в одну строку и начинаться с #
  • URL может быть как абсолютным так и относительным
  • Сам HTML файл, который определяет манифест, автоматически попадает в кеш приложения, так что добавлять его туда не обязательно.

Наш манифест:
CACHE MANIFEST
# five o’clock
sinchron.js


Сохраним его в «cache.manifest», там же где у нас и остальные файлы.
Подключить манифест просто:
<html manifest="cache.manifest">

Итак, первый шаг пройден. Идём дальше.

Во-вторых, займемся внешним видом, ну какое это приложение, когда у нас отовсюду видны элементы браузера. Так не пойдёт, хотим красоты!

Safari поддерживает ряд мета-тегов, которые задают в том числе и внешний вид браузера.
Добавляем в наш HTML пару таких указаний:
Пусть приложение открывается в «полноэкранном режиме»(избавимся от адресной строки и панели навигации):
<meta name="apple-mobile-web-app-capable" content="yes" />

Далее сделаем статусную панель в такт основному фону приложения, а он у нас чёрный.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Полезной, в нашем случае точно, будет установка размера окна браузера равного ширине экрана самого устройства.
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

Загружаем все это (HTML, JS, Manifest) на сервер. Берём iPhone/iPad/iPod.

Посмотрим, что же получилось на устройстве. А ничего! По прежнему адресная строка на месте, да ещё эта белая панелька. Но не торопитесь расстраиваться. Всего-то надо сказать Safari, чтобы тот добавил текущую страницу на домашний экран (Home Screen), туда где все приложения (для этого тыкаем иконку со стрелочкой на панели навигации Safari, та что внизу посередине). В результате в списке приложений появится и наше. Открываем и вуаля — никаких намёков на web-страничку, полный экран, черная панель статуса, всё как у больших!
Переходим в самолетный режим (отключаем интернет) и запускаем… Работает и в интернет не просится!

Бонус

Как известно, экран может быть как в портретной так и в альбомной ориентации, что же, добавим поддержку и мы. Для этого реализуем поведение на событие onorientationchange.
window.onorientationchange = function() {
// много строк кода
}


Вот и все.
Красивого вам времени и интересных приложений!

http://bit.ly/isinchron
image

Список литературы
Tags:
Hubs:
+6
Comments 22
Comments Comments 22

Articles