[JavaScript, Разработка мобильных приложений] Разработка под iOS без Xcode

Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
10-Июл-2021 16:30


Прошу прощения за такое желтушное название. Назвать следовало бы так – Разработка автономной 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» не то чтобы много.
===========
Источник:
habr.com
===========

Похожие новости: Теги для поиска: #_javascript, #_razrabotka_mobilnyh_prilozhenij (Разработка мобильных приложений), #_appcache, #_javascript, #_razrabotka_mobilnyh_prilozhenij (
Разработка мобильных приложений
)
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 11-Ноя 02:34
Часовой пояс: UTC + 5