Автономное web-приложение для iOS

Если хорошо покопаться в Интернете, то можно найти несколько путей создания и установки приложений мимо кассы Apple, но большинство из них предлагает пользователям либо крайне ограниченные и нестабильные возможности, как Thunkable X, либо необходимость глобокого погружения, как технология PWA (Progressive Web Apps), которая была анонсирована несколько лет назад, но так и осталась широко известной в узких кругах. Между тем существует вполне очевидный и действительно простой вариант - использование html-файлов, которые открываются и на iOS.

Если присмотреться к возможностям web-технологий в контексте задач, стоящих перед мобильными приложениями, то необходимость доступа к нативной функциональности iOS возникает далеко не во всех случаях. При помощи web-технологий можно создать имитацию нативного интерфейса, работать с FireBase, картами Google, мультимедиа и др. А раз так, то что мешает нам создать автономное web-приложение? Особенности среды iOS, которые постоянно вставляют палки в колёса. Если создать папку проекта и скопировать в неё зависимые файлы html, css и js, то работать это не будет. Необходимо код всех файлов (стилей, фреймворков и библиотек) объединить в одном html-файле. Копируем код и вставляем его между тегами <style> и <script>, а затем скрываем эти блоки для более удобной работы в редакторе.

Еще один нюанс состоит в отображений нашего проекта. Разные файловые менеджеры по-разному отображают файлы. В одном случае при взаимодействии пользователя с областью файла будет происходить скрытие и отображение панели навигации, в другом - очистка панели навигации без её скрытия, в третьем - невозможно перейти в полноэкранный режим или скрыть рекламный банер и т.п. Нам же нужен файловый менеджер, который позволяет просматривать файлы в полноэкранном виде без постоянного выхода из него. Для этого подойдёт File Explorer от SMARTDISK ORG.

Вводные получены, перейдём к практике. Для синхронизации web-приложений на ПК и iOS, а также их отладки подойдёт облачное хранилище данных Dropbox.

Установите DropBox на ПК и iOS, если это ещё не было сделано ранее, и в папке Dropbox на ПК создайте простой html-файл, например, содержащий текст <h1>Hello</h1>. При включенной синхронизации этот файл появится в Dropbox на iOS, где его можно открыть. Работает? Прекрасно! Теперь после каждого сохранения изменёний данного файла, на устройстве iOS будет отображаться кнопка обновления. Это позволяет реализовать нечто похожее на ”живой” просмотр.

Для создания нативного интерфейса и поведения воспользуйтесь каким-либо подходящим фреймворком, например, Framework7. На этапе разработки удобнее использовать внешнее подключение файлов стилей и движка. Для этого включите в html-файл строки:
после <title>

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/4.1.0/css/framework7.bundle.min.css" />

перед </body>

<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.7/js/framework7.min.js"></script>

Для получения автономного приложения вместо этих ссылок нужно будет вставить в html-файл код из этих файлов (cкачать пример).