Готовим мобильное приложение в Битрикс, с помощью cordova и fraimework7 v.2

Итак функциональные возможности приложения:
1. Работа в offline режиме
2. Автоматическое обновление без перезаливки сборок в google Play и App Store
3. Пуш уведомления
4. Расширить функциональность можно с помощью плагинов http://cordova.apache.org/plugins/?q=

Документация cordova - http://cordova.apache.org/docs/en/7.x...index.html
Документация fraimework7 - http://framework7.io/docs/

Надстройка под битрикс, со всем готовым
1. Устанавливаем модуль https://github.com/artlux/mlife.mobileapp
2. Создаем папку для мобильного приложения на сайте /mobile_app/
3. Размещаем в ней компонент и web версию мобильного приложения https://github.com/artlux/mlife.mobile...mobile_app
4. Меняем стартовый адрес на свой в https://github.com/artlux/mlife.mobile.../js/app.js
5. Приложение готово к использованию, протестировать на android можно тут https://build.phonegap.com/apps/3027447/share, указав в настройках стартовый адрес
6. Если по каким-то причинам была допущена ошибка в адресе, то придется переустановить или очистить данные в приложении

Структура шаблона, браузерная версия, и механизм работы
1. Файлы в /mobile_app/www/ должны быть расчитаны на то, что не будут изменяться. Иначе для их изменения потребуется перезаливка сборок в маркеты
2. js/app.js
- настройка которая понадобится для браузера и для разработки browser: true (не загружает js и css а берет напрямую с сервера, чтобы не обновлять постоянно базу)
- для сборки приложения тут будет browser: false
- логика скрипта заключается в создании базы и загрузке в нее данных: шаблон html, шаблоны страниц, оффлайн страницы, меню, кастомные стили, кастомный js
3. в качестве базы используется web sql
4. также для index.html используются прямые подключения файла js и css, при сборке нужно убирать

Шаблон:
custom
- main.css
- main.js
tmpl
- error.tmpl
- html_page.tmpl
- main.tmpl
- main_offline.tmpl
- *.tmpl
pages
- err.php
- updatepush.php
- *.php
ajax.php
css.php
js.php
menu.php
pages.php
tmpl.php
version.php

Подробно по файлам:
ajax.php - это запросы по url=/ajax/$page/, $page = /pages/$page.php
css.php - получение кастомного файла стилей, по умолчанию грузит из /custom/main.css
js.php - получение кастомного файла скриптов, по умолчанию грузит из /custom/main.js
menu.php - меню приложения
pages.php - список страниц для загрузки в базу, а также их содержание
приложение отправляет запрос /page/ шаблон отдает список страниц
после приложение поэтапно шлет запросы на получение данных, идентификаторы содержаться в $arResult['VARIABLES']['GET_PAGES']
эти данные пишутся в базу в приложении в json
tmpl.php - шаблоны страниц приложения, получает из папки /tmpl/
version.php - версия приложения, при изменении версии обновит данные у всех автоматически при запуске и наличии интернет

папка /pages/ - это online страницы, и скрипты для приемки данных
updatepush.php - обновляет идентификаторы пуш, выданные FCM
err.php - это страница ошибки если по адресу /ajax/$page - не найдется данных
*.php - любые ваши online страницы (при размещении компонентов битрикса, пагинаций, фильтров и т.п. следует учитывать что каждый запрос с приложения подписывается get параметрами, версия, ид устройства, ключ и т.п.)

папка /tmpl/
error.tmpl - страница ошибки при поиске страницы в базе
html_page.tmpl - шаблон html страницы
main.tmpl - шаблон главной online страницы
main_offline.tmpl - шаблон главной offline страницы
- *.php - любые шаблоны offline страниц, если страницы статические можно не заморачиваться и размещать их сюда, pages.php получит и загрузит их автоматически

Подробно о main.js
Файл содержит в себе всб логику вашего приложения, весь код в данном файле выполняется в eval(); в приложении при запуске
Основной механизм это подключение fraimework7 + некотороя надстройка для работы с ним и обход некоторых ньансов и механизмов работы библиотеки.
есть костыли для отображения кнопки назад, т.к. фреймворк автоматически подгружает предыдущие страницы и некоторые другие ньансы...
Основные проблемы это работа истории и кнопки назад (они же были и в версии fraimework7 v.1), скорее из-за особенности оффлайн режима и того что фреймворк не подразумевает что оффлайн данные будут лежать гдето в базе внутри приложения и изменяться со временем

вообщем этот каркас я использую во всех своих приложениях ничего не меняя
комментарии в коде кое-какие написал... чтобы понять логику...

Сборка приложения в phonegap build
1. Необходимо зарегистрироваться на сервисе https://build.phonegap.com/
2. Создать реп на git для приложения. Пример: https://github.com/artlux/mlife.mobileapptest
3. Для пушей добавляем проект в https://console.firebase.google.com/project/ (для отправки с админки битрикса, копируем ключ в настройки модуля).
для android приложения скачиваем google-services.json, для ios GoogleService-Info.plist
4. Меняем стартовый url в app.js (меняем изображения и свои стили, если вы их решили добавить)
5. делаем иконки и сплеш экраны (размеры и настройки в config.xml взял из одного из своих проектов).
Примеры для phonegap build, также есть на акаунте (правда пока не все переделаны под fraimework7.v2)

Подробнее о добавлении плагинов и параметров для сборки смотрите в документации cordova, и phonegap build

Для андроид можно без ключей сбилдить debug версию в которой все будет работать

Публикация приложения:
Release версия android требует ключа, как создать можно погуглить (акаунт в google play для публикации единоразово, точно сумму не помню но гдето около 25$)
Для ios требуется аккаунт разработчика, создание сертификатов, ключей, провизии происходит через личный кабинет developer.apple.com (стоит 99$ в год, для беларуси накладно с учетом того что юзают приложения не много людей)
Конвертация в нужный формат уже через приложение на MAC Keychain Access (самый простой способ), загрузка через application loader
Да и без макбука будет тяжеловато грузить сборки, также для тестирования нужно ios устройство (хотя после тестирования на андроид ньансов небыло никаких на ios)
Денег на ios технику у меня нет, поэтому я обычно в скайпе попрошайничаю выполнить бесплатно работу тестера
По поводу макбука таже история, но можно на vmware развернуть виртуалку хакинтоша, через которую можно загружать приложения
Вообще на сам процесс публикации в app store нужно будет набраться терпения и времени

Если ктото решит побаловаться и будут какие вопросы можно писать в скайп mlife_development,
Если нет андроид устройства но хочется побаловаться то могу собрать тестовую версию приложения и для ios, от вас нужен будет email адрес в app store, для добавления вас в качестве тестера

на данный момент нет поддержки транспорта файлов (но реализация думаю возможно с помощью плагина cordova-plugin-file)

веб версия demo, crome браузер - https://mlife-media.by/mobile_app/www/index.html
android demo - https://build.phonegap.com/apps/3027447/share