[JavaScript, Разработка мобильных приложений] Разработка под iOS без Xcode
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Прошу прощения за такое желтушное название. Назвать следовало бы так – Разработка автономной 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] Как я писал тестовое задание на Angular и почему некоторым разработчикам не стоит давать тестовое задание
- [JavaScript, Node.JS] Создаем свой сайт или блог на Ghost в образе Docker
- [JavaScript, Алгоритмы] Быстрая математика для графиков, на примере вычисления среднего
- [Разработка мобильных приложений, Управление разработкой, Управление проектами, Управление персоналом] Масштабируем команду мобильной разработки: как мы в Ozon справились с ростом до 44 iOS, Android и QA на одном приложении
- [Разработка мобильных приложений, Разработка под Android, Монетизация мобильных приложений, Законодательство в IT] Google начала препятствовать открытию магазина Samsung Galaxy Store
- [Программирование, Разработка мобильных приложений, Конференции, Flutter] Анонс эфира Flutter live-coding сессии
- [Разработка мобильных приложений, Законодательство в IT, IT-компании] ДИТ собрался отдать на аутсорсинг обслуживание системы мониторинга местоположения граждан с подтвержденным коронавирусом
- [Разработка мобильных приложений, IT-компании, Голосовые интерфейсы] Голосовые ассистенты «Сбербанка» научились работать с Госуслугами
- [JavaScript] Тест библиотек построения диаграмм классов, исследуя исходный код популярных js библиотек
- [Разработка мобильных приложений, Разработка под Android] Властелин модулей. Продолжение истории
Теги для поиска: #_javascript, #_razrabotka_mobilnyh_prilozhenij (Разработка мобильных приложений), #_appcache, #_javascript, #_razrabotka_mobilnyh_prilozhenij (
Разработка мобильных приложений
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 13-Ноя 12:19
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Прошу прощения за такое желтушное название. Назвать следовало бы так – Разработка автономной 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 =========== Похожие новости:
Разработка мобильных приложений ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 13-Ноя 12:19
Часовой пояс: UTC + 5