Простое HTML5 приложение (WebApp) заметок для iPhone 5s в оффлайн режиме
Я люблю всё в своей жизни упорядочивать - списки задач, заметки - это прям моё. Имея во владении древнее ведро с болтами (машину), приходится записывать все проблемы с машиной, т.к. озвученая проблема - это половина пути к её решению. Стандартная программа заметок в моём iPhone 5s слишком громоздкая, захотелось сделать свою. Да так, чтобы выглядела она не хуже, всякие там анимации, жесты... Не затрагивая профессиональную iOS разработку, простейший способ создания приложений - PWA (прогрессивное веб-приложение). На iPhone это дело поддерживается весьма скверно, но всё еще работает так называемое WebApp (Web Application, HTML5 + appcache manifest).
По сути, это обычная веб страница, сохраненная на главный экран телефона. Отличие лишь в том, что интерфейс Safari скрыт, а страница остается функциональной при отсутствии интернета.
- В своем iPhone в Safari перейти по адресу
- Нажать "Поделиться" снизу
- Нажать "На экран Домой"
- Нажать "Добавить"
- Запустить появившееся приложение
При использовании приложения, сетевое подключение не нужно
- Чтобы добавить заметку:
- нажать "Новая заметка" сверху справа
- написать текст заметки
- нажать "Готово"
- Чтобы удалить заметку:
- смахнуть заметку влево
- нажать "ОК"
- Чтобы выделить заметку:
- смахнуть заметку вправо
- Чтобы переместить заметку:
- долгий тап по нужной заметке
- заметка выделилась серым
- выбрать заметку, на место которой надо вставить нужную
- Чтобы экспортировать все заметки в текстовый файл:
- нажать "Новая заметка" сверху справа
- написать "backup"
- нажать "Готово"
- нажать "экспорт"
- выделить весь текст
- нажать "Поделиться..."
- Скопировать в Documents или Сохранить в Файлы
- Чтобы импортировать заметки из этого текстового файла:
- нажать "Новая заметка" сверху справа
- написать "backup"
- нажать "Готово"
- нажать "Выбрать файл"
Некоторые специфичные для Safari css стили, которые я использовал:
-webkit-touch-callout: none - чтобы убрать меню при длительном нажатии ссылки
-webkit-text-size-adjust: none - чтобы отключить автоматическое масштабирование страницы
-webkit-user-select: none - чтобы отключить возможность выделения текста
-webkit-tap-highlight-color: transparent - чтобы отключить выделение ссылки цветом при нажатии
-webkit-hyphens: auto - автоматическая расстановка переносов
Ну и напоследок одна очень неприятная особенность подобного рода приложений. Спустя какое-то время работы оффлайн, программа перестает работать, требуя интернет. В моем случае будет грустный смайлик (404.html) и кнопка back, которая работает лишь в половине случаев. Бороться с этим можно так: с включенным интернетом необходимо принудительно обновить страницу приложения. Как мы помним, интерфейса браузера нет, нужно при создании новой заметки ввести "backup", нажать "Готово", нажать "назад и обновить". Можно это сделать несколько раз