Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Прошу прощения за такое желтушное название. Назвать следовало бы так – Разработка автономной html+js+css страницы для сохранения её на рабочем столе iPhone (иными словами Web App, не путать с PWA), чтобы она открывалась и выглядела как нативное iOS приложение. Кстати это был TL; DR
Начну издалека. Пользовался раньше исключительно андроид смартфонами, писал для себя простейшие программки. Например, приложение заметок, напоминалки и пр. Купил себе старое немецкое авто, но держать в голове список того что надо сделать с ним было крайне сложно. Написал и для этого приложение. Затем купил древний iPhone 5s. Вникать в разработку под iOS, а также купить хоть даже простенький макбук мне не улыбалось.
Прочитал про технологию PWA (прогрессивные веб-приложения) и обрадовался – базовые навыки html получил еще в колледже, а javascript не сильно отличается от Java, как я думал. Но тут нашлась проблемка – PWA для кэширования файлов использует Service Worker, а ему в свою очередь нужен https. Я же не владею сайтом в интернете, а собрался использовать локальный http-сервер nginx for windows. На помощь пришла технология простых, не прогрессивных, веб-приложений – это та, в которой Application Cache. В айфонах эта технология поддерживается с бородатых времен. Здесь ссылка на документацию от Apple, вот хорошая статья на Хабре.
И так.
Сначала написал просто html страницу с кодом, как будто бы я делаю свой личный сайт для мобильных устройств. В коде прописал весь алгоритм будущего приложения – заметки сохраняются в localStorage, список заметок выводится динамически элементами div, есть имитация жестов смахивания для удаления/выделения и назад с помощью addEventListener, в css используются хитрые свойства:
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
и прочее. Для превращения простой html страницы в подделку под нативное приложение добавил следующие теги:
<link rel="apple-touch-icon" href="icon.png" >
<link rel="apple-touch-startup-image" href="splash.png">
<meta name="apple-mobile-web-app-title" content="название на рабочем столе" >
<meta name="apple-mobile-web-app-capable" content="yes" >
Написал еще одну html страницу для возможности импорта/экспорта заметок.
Далее надо было сконфигурировать сервер для работы с Application Cache. В папке с nginx в файл mime.types добавил строчку:
text/cache-manifest appcache;
а в тег html основного документа добавил:
<html manifest = "ma.appcache" lang="ru" >
Сам манифест выглядит так:
CACHE MANIFEST
#version 0.4.1
CACHE:
arriva.html
icon.png
back.png
new.png
del.png
tag.png
splash.png
NETWORK:
FALLBACK:
/ 404.html
Последняя строчка подменяет любой незагруженный элемент страничкой с грустным смайликом.
Далее включаем сервер и в браузере Safari переходим по адресу типа 192.168.100.2. Нажимаем «Поделиться» а затем «Добавить на экран домой». Всё.
Данный текст не туториал. Возможно, он читается как «Чтобы нарисовать сову, нарисуйте сначала круг, а затем всё остальное». Я попытался сделать акцент не на код, а на принципиальную возможность сего действа. Код можно посмотреть в моём репозиторие. ОСТОРОЖНО! СSS стили и код JavaScript в одном html документе. И всё это без папок.
Для кого был весь этот текст? Для тех, кто думает, что сделать что-то типа приложения для своего смартфона – фантастика. Для тех, кто любит что-то создавать свое, но у него iPhone. Для тех, кто в разработке под iOS не очень, но простенький сайт сделать смог бы. Ведь статей, типа «Создание приложения Hello World для iOS на html+js+css» не то чтобы много.
