Размещенные веб-приложения на Android, iOS и Windows с помощью manifold.JS

Эта статья является частью серии технологий веб-разработки от Microsoft. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

Недавно на // build / 2015 Microsoft анонсировала manifoldJS — самый простой способ создания размещенных приложений на разных платформах. Хотя Джон Шевчук, технический сотрудник и технический директор Microsoft Developer Platform, проделал огромную работу по созданию размещенного веб-приложения прямо на сцене (вы можете увидеть резюме здесь ), я хотел бы немного подробнее рассказать и объяснить почему вы хотите использовать размещенные веб-приложения и объяснить, как создать его для себя с помощью manifoldJS.

Почему Хостинг и многообразие JS?

Размещенные веб-приложения объединяют лучшее из Интернета для хранения приложений с минимальными усилиями. Это отличный способ привлечь большее количество пользователей уже созданным вами опытом. И когда вы обновляете свой веб-интерфейс, ваши пользователи получают такое же обновление и в размещенных веб-приложениях! Проблема в том, что до сих пор сложная вещь в размещаемых приложениях заключалась в том, насколько отличается процесс на каждой платформе. МанифольдJS меняет это, делая акцент на W3C Manifest для веб-приложений — основанном на стандартах подходе с открытым исходным кодом для создания приложений — и затем использует эти метаданные для создания собственного приложения на Android, iOS и Windows. Когда платформа поддерживает размещенные приложения, мы создаем ее изначально, а затем используем Cordova, чтобы заполнить платформы, которые не имеют встроенной поддержки.

Начало работы с manifoldJS

Есть два основных способа начать работу. Если вы веб-разработчик, который живет в командной строке, начните с интерфейса CLI. Для разработчиков, которые хотят запускать manifoldJS в облаке, у нас есть те же инструменты на сайте.

Первое, что вы хотите сделать, это создать манифест для вашего сайта. Это должно быть довольно знакомо веб-разработчикам, так как это довольно простой объект JSON. Вот образец с этого сайта:

{
"name":"ThisHereWeb",
"short_name":"THW",
"icons":[
{
"src":"images/tiny.png",
"sizes":"70x70",
"type":"image/png"
}
],
"start_url":"index.html",
"scope":"http://*.thishereweb.com"
"display":"standalone",
"orientation":"landscape"
}

Для получения дополнительной информации о создании файла манифеста, в том числе о том, как обслуживать его с вашего веб-сервера, ознакомьтесь с этим сообщением в манифесте . Если вам нужна помощь в создании этого манифеста, попробуйте генератор кода на сайте manifoldjs.com . Мы проведем вас через необходимые вам значения с помощью мастера, а затем предоставим вам готовый манифест для вашего сайта в конце.

Использование инструмента CLI

ManifoldJS работает на знакомых технологиях. Единственное требование — у вас установлен Node.js. ManifoldJS будет работать в любой системе (Mac, Linux и Windows), но может создавать приложения только для платформ, которые поддерживаются в этой системе.

Установка инструмента:

 npm install manifoldjs
grunt manifoldjs

ManifoldJS будет обрабатывать установку для всех своих зависимостей через npm. Оттуда вы просто переходите на свой сайт:

 manifoldjs http://www.thishereweb.com

Оттуда произойдет одно из двух:

1. Если у вас есть манифест на вашем сайте, он свернет его вместе с соответствующими изображениями и создаст из него приложения.
2. Если у вас нет манифеста на сайте, мы просто примем некоторые данные по умолчанию и сгенерируем ваши приложения вместе с манифестом для вас. Мы также будем использовать изображения-заполнители, чтобы по-прежнему создавать инструменты.

Если вы хотите увидеть, что происходит, включите ведение журнала и следите за консолью. Наряду с ведением журнала, у нас есть ряд других опций, которые можно настроить для управления выходом инструмента:

параметры

Использование веб-генератора манифеста

Все те же отличные функциональные возможности доступны и в нашем веб-инструменте. Посетите веб-генератор и начните.

 "mjs_urlAccess":[

{"url":"http://manupjs.azurewebsites.net/"},

{"url":"http://www.manifoldjs.com/"}

],