HTML5 читалка для iPhone за сутки

30 Sep, 2010

Вдохновились вместе с genn.org и за сутки сделали полноценную читалку для айфона, андроида, и всех кто поддерживает html5 чуть лучше утюга. О дизайне читайте в блоге у Гены, остальное у меня здесь и сейчас. Все очень просто.

Реклама, пам-пам:
Пользуясь случаем хочу анонсировать мастер-класс Николая Мациевского об ускорении сайтов (он кстати написал про это две книги, и участвует в W3C), 9 октября в Киеве.

Зачем оно вообще могло понадобиться?

Дело в том, что год назад я перепрошил свой айфон на чужом компьютере. И этот бедняга, уроженец Сан-Франциско, и без того залоченный, еще и заглючил. Я больше не смог ставить ничего из AppStore, и использование мной i2reader закончилось. Да, вот такой какой-то глюк с аккаунтами в itunes.

Но, я люблю читать, и любовь эта, словно солнцелюбивое растение пыталась продраться сквозь тьму глюков айфона, к сияющему солнцу знаний, что сулили мне книги.

Я решил сделать читалку на HTML. После исследования этого вопроса, оказалось что меня спасёт HTML5. Стандарт еще не вышел, а уже помог мне прочитать несколько книг! Это для тех кто вечно спрашивает когда же HTML5 станет реальностью. Так вот, правильный ответ &#8212 вчера.

А потом мы c Геной вдохновились и решили сделать проект супербыстро. Хотя идея жила во мне давно. Так и получился этот проект за сутки:

Вот так это выглядит на моем iPhone 3G

Сразу оговорюсь, проект конечно же заточен под Webkit, просто потому что у меня айфон, а не что-то там еще с Оперой. И в Хроме и Сафари он выглядит ближе всего к дизайнерскому. Можно конечно заставить его выглядеть везде одинаково, но за сутки я этого не хотел и не мог сделать. Потом, ок.

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

Каталог

Обычный сайт, но в разработке столкнулись с интересными моментами.

Так как пикселов на новом экранчике iPhone 4 ровно в 4 раза больше чем в старых. То иконки в формате PNG выглядели достаточно размыто и не очень клёво. Однако, мы перевели их все в SVG (ага, именно поэтому пользователи Фаерфокса не видят иконок вообще) и на новых айфонах они выглядят просто офигительно. Чего и вам советую при разработке сайтов под айфон.

Вверху то, как это выглядит на старых айфонах (почти не видно разницы), а ниже скриншот из iPhone 4. Угадайте где PNG, а где SVG.

Кстати, проверить поддерживает ли браузер SVG можно таким образом:

  1. if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")) {
  2. ...а тут например добавить class для body
  3. }

Кроме этого, все градиенты сделаны через CSS, и потому выглядят всегда идеально и меняются достаточно легко.

Причем тут html5?

Это вторая часть сервиса.

В проекте используется часть спецификации называемая application cache и local storage (это вместо кук, только чтобы запомнить место последнего чтения книжки). Хорошая новость, что их почти все браузеры поддерживают. В том числе Сафари на iPhone.

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

Синтаксис примерно такой:

  1. <!DOCTYPE HTML>
  2. <html manifest="reader.manifest">
А внутри файла что-то вроде этого:
  1. CACHE MANIFEST
  2. js/jquery.js
  3. css/style.css
  4. img/read.png
  5. img/read-gr.png
(вообще говоря это точная копия с reader.org.ua)

На самом деле в стандарте есть еще куча наворотов, но они мне не нужны были, вы же можете почитать.

Собственно это я и проделал, я сделал страницу с текстом книги офлайновым приложением.

В результате, открыв лишь однажды страницу с книжкой, она становится вам доступна навсегда, даже когда у вас нет интернета.
Но, доступна в браузере. То бишь чтение бы выглядело как-то так:

Много пространства занято совершенно не относящимся к чтению интерфейсом

Тут на помощь приходят всякие крутые метатеги которые работают только для продуктов Apple:

  1. <meta name="apple-mobile-web-app-capable" content="yes" />
  2. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
Подробнее о них на сайте apple.com.

В результате, если сохранить этот сайт на ваш Home Screen (в айфоне для этого есть кнопка «+» в сафари). Он превращается в нечто похожее на обычное приложение:

Здесь у меня сохранено много книг, в 4-й прошивке думаю их логично группировать

И после запуска выглядит вот так:

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

На этом мы и остановились пока. Нельзя сказать что это приложение должно заменить ваше нативное. (хотя в четвертом айфоне разница по скорости с нативными не заметна вовсе).
Но для меня оно стало спасением, возможно пригодится и кому-то еще, как демонстрация или вдохновение, или для чтения.

Полезные ссылки

Из того что пока не удалось до конца победить или успеть:

  • В каталоге порядка 10 000 книг, но есть дубли и пустышки. Скоро надеюсь залить новую базу.
  • Настройки для чтения: размер и цвет текста и фона
  • Если у вас не iPhone 3gs или 4 то может ощутимо тормозить и долго все делать
  • Все что вызвано предыдущим пунктом, иногда лучше подождать, пока что-то произойдет
  • Пока только portrait mode. Не придумал как сочетать оба.
  • Постраничное перелистывание, есть идеи, но это уже сложнее чем 10 часов :)
Буду рад мнениям, советам и идеям. Или тому на что это вас может вдохновить.

32 комментариев к “HTML5 читалка для iPhone за сутки”

1.Михаил | 30 Sep, 2010
Классная штука. И я правильно понимаю, что раз на Android-устройствах браузер на базе webKit, то всё описаное работает и для него (Local Storage) в первую очередь? Осталось только переписать руководство по добавлению закладок на экран (кнопки "+" здесь нет).
2.Александр | 30 Sep, 2010
Айфон у тебя, скорее всего, не заглючил, а поставили новую прошивку, где работает защита. Ставь через Cydia приложение Appsync и все будет устанавливатся напрямую, без Appstore ;-)
3.D. Sohin | 30 Sep, 2010
> hhttp://developer.apple.com/... hh
4.Twitter Trackbacks for cssing :: Архив :: HTML5 читалка для iPhone за сутки [org.ua] on Topsy.com | 30 Sep, 2010
[...] cssing :: Архив :: HTML5 читалка для iPhone за сутки cssing.org.ua/2010/09/30/html5-app-in-24h/ – view page – cached Блог про CSS и все что с этим связано. Новые приемы и технологии и т д. Tweets about this link [...]
5.Егор | 30 Sep, 2010
Здорово. А как конвертировали иконки в SVG?
6.akella | 30 Sep, 2010
Зависит от иконок, но конкретно эти изначально были отрисованы в illustrator и потому оттуда же их так и сохранили в SVG. А вообще векторные редакторы почти все это умеют.
7.akella | 30 Sep, 2010
Да, и даже в Опере скорее всего тоже будет работать. Руководство получается надо заменить на обычное добавление в букмарки (в Андроиде кажется нет аналога плюсика). Просто сохраняем адрес книги, и при втором заходе будет выдаваться закешированная версия. Что вобщем будет работать во всех браузерах поддерживающих Application Cache и Local Storage, то есть и на андроиде. Вот только в опере надо попробовать потестировать.
8.mee | 30 Sep, 2010
К сожалению в Андроиде иконок тоже нет :(
9.agat | 30 Sep, 2010
Мой сердечный респект и уважуха! Впечатляет :) Растешь на глазах. А, откуда у вас столько книг? :)
10.Sam | 30 Sep, 2010
Вполне себе нормально работает в эмуляторе оперы: http://www.opera.com/mobile/demo/
11.Sam | 30 Sep, 2010
Немного раздражает «to save a book on your device»: закрыла текст и как убрать не ясно. Да и в Opera нет никакого плюса…
12.Михаил | 30 Sep, 2010
О, в андроиде (по крайней мере htc desire) можно даже иконку "книги" на экран положить. Очень вкусно.
13.akella | 30 Sep, 2010
Я там повесил ontouchstart и onclick ( на «to save a book on your device») - по ним фигня убиралась. Еще был таймаут на 10 секунд, но его-то вот я как раз и убрал, решил не нужен. Видимо надо вернуть, а то на мобильниках же нет клика. @Михаил, mee Спасибо за фидбек, неужели мечта так близко, можно сделать одно приложение для всех :)
14.Сергей Цепелев | 30 Sep, 2010
А как сделан нотификатор о возможности добавления иконки на HomeScreen?
15.MyFreeWeb | 30 Sep, 2010
SVG чтобы видел Firefox, надо использовать object, а не img. Но у object есть косяки с ресайзом в вебките. Проще на сервере их опеределять и подставлять чего надо (:
16.akella | 30 Sep, 2010
Та, костыли такие неприятные, зачем мудрить если нет мобильного ФФ =) Определять на сервере браузер для SVG - очень неправильно. Нужно определять фичу джаваскриптом. Потому что когда выйдет новый фаерфокс который будет поддерживать SVG такой серверный скрипт не покажет ему SVG.
17.Дайджест недели, 1 октября - shlema - блог разработчиков | 01 Oct, 2010
[...] хроники реализации «проекта за 33 часа» (один участник, другой участник), в рамках которого было создано универсальное [...]
18.lusever | 01 Oct, 2010
Идея и реализация просто супер. Мне кажется вам не хватает серверного программиста для полного счастья )
19.akella | 01 Oct, 2010
Тут ты совершенно прав, мои PHP-потуги выглядят достаточно забавно, особенно изнутри :)
20.D. Sohin | 03 Oct, 2010
> зачем мудрить если нет мобильного ФФ Пользователи Fennec под Maemo на N800, N900 и пр. будут огорчены вашей эрудицией Ещё иногда можно просто использовать .xml (см. http://stackoverflow.com/questions/1114561/inline-svg-in-html-with-firefox-3-5)
21.Akella | 03 Oct, 2010
Огорчаться им следует в первую очередь из-за своей численности ;-), которая для меня эквивалентна слову "нет"
22.D. Sohin | 04 Oct, 2010
Что не отменяет их наличие и ваше ущемляющее безразличие
23.Akella | 04 Oct, 2010
Так ведь я и не спорю. Только речь ведь о том чтобы ради этого прямо скажем редкого браузера я писал говнокод с хаками? И это ради картинок - некритичного функционала. Увольте. Не умеет свж, так не увидит а о том как не через задницу показывать там иконки я написал в посте но сделать пока на живом проекте не успел. =( Тут действительно моя вина. К тому же насколько я понимаю у устройств феннека пока нет экранчиков где они смогут отличить растр от вектора:-)
24.Дима | 15 Oct, 2010
Все девайсы на Maemo с большими экранами как по габаритам так и по разрешению. Говорю как бывший владелец N800.
25.akella | 15 Oct, 2010
Да, но я скорее о плотности пикселов чем о размере. Там действительно будет видно разницу между вектором и растром? Если так, то возможно и правда стоит :)
26.Stepan | 18 Oct, 2010
Полезно только тем, у кого стандартная не работает я так понимаю?
27.RE | 20 Oct, 2010
Так какой формат книг-то?
28.Jman | 31 Oct, 2010
Очень неудобный поиск, сортировка по авторам была бы удобнее. ЗЫ. Нортон есть?
29.Андрей Кравец | 24 Sep, 2011
хорошая статья, спасибо автору
30.AlexWin | 19 Oct, 2011
Статья - то хорошая, только продолжение бы почитать.
31.Sergey X. | 03 Oct, 2011
Я зашел на указанный сайт http://reader.org.ua со своего андрод телефона - но там совсем другой сайт сейчас. Подскажите что случилось с сайтом? Или я что-то не так делаю?
32.Евгений | 06 May, 2012
there’s some great looking stuff in there.