Создание универсальных веб-приложений при помощи Web App Template

55981ff9f3b94e0e9f3d73c6ff917b52.pngВсем привет! Сегодня мы с вами будем знакомиться с инструментом для создания веб-приложений для Windows и Windows Phone — Web Application Template.

В этой статье мы с вами разберемся, что такое веб-приложения и зачем они нужны, а также посмотрим, как Web Application Template может помочь вам при создании веб-приложений.

Зачем нужны веб-приложения, если есть веб-сайтыЕсли вы следите за развитием веб-технологий, то вы легко могли заметить, что граница между веб-сайтами и (нативными) приложениями постепенно стирается. Причем дело не только в технологической возможности использовать веб-стек для разработки нативных приложений (например, под Windows 8.x и Windows Phone 8.1 или Firefox OS), но и в целом с точки зрения UX (например, недавний анонс альфа-версии следующей версии Яндекс.Браузера явно движется в этом направлении).e052f38ff62743be804dde63eea0fcf0.png

Попытки использовать веб-стек для разработки приложений имеют уже давнюю историю: вспомнить хотя бы HTA для Windows. Аналогично время от времени предпринимаются и попытки «превратить» сайты в приложения, причем не только с точки зрения внутреннего наполнения (к примеру, outlook.com — это фактически почтовое приложение, а веб-версия Microsoft Office действительно позволяет редактировать и просматривать офисные документы), но и с точки зрения интеграции таких сайтов в операционную систему под видом приложений (тут достаточно вспомнить идею закрепленных сайтов в Internet Explorer, хотя это не единственный заход к этой идее в индустрии). С развитием магазинов приложений эти идеи приобретают новые черты, как маркетингового характера (а что, если мы будем распространять сайт через магазин приложений), так и технического, особенно в случае платформ без нативной поддержки HTML/JS (обычно решается через WebView или аналоги и обвязки над ними).

Сегодня за стремлением превратить веб-сайт в (нативное) веб-приложение стоит множество возможностей по расширению взаимодействия с людьми по ту сторону сенсорных экранчиков:

(Контролируемый) доступ к различным функциям устройства и операционной системы, которые обычно спрятаны за песочницой браузера, не имеют еще аналога в виде соответствующего веб-стандарта или просто не поддерживаются браузером посетителя сайта. Например, вы можете получить доступ к адресной книге пользователя или камере. Веб-сайту, как правило, нужен постоянный доступ к интернету (удобство использования AppCache — это тема для отдельного разговора). В случае приложения, разработчику доступна гибкая настройка работы приложения в оффлайн режиме — можно заранее закэшировать необходимые ресурсы, в том числе в фоне. Вы можете интегрировать в веб-приложение элементы управления системы, под которую вы делаете приложение, мимикрируя таким образом под привычное окружение. Еще один плюс в копилку веб-приложений — поддержка push-уведомлений. Push уведомления являются дополнительной возможностью взаимодействия с пользователем. Расскажите им об акциях вашего интернет-магазина или обновите информацию о новых сообщениях на плитке телефона! И это лишь первое, что приходит в голову, а ведь есть же еще механизмы монетизации, интеграция с внешними устройствами и много чего еще.

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

В принципе, в том, чтобы самостоятельно обернуть своей веб-сайт в приложение, нет ничего сложного. Берете Webview — и оборачиваете.

Дьявол, однако, как всегда зарыт в деталях, поэтому мы сделали готовый движок для таких задач. Движок называется WAT (хотя в названии есть слово template, там реально целый движок!). Кстати, с открытым кодом.

Шаблон для создания веб-приложений — Web App Template Web Application Template (WAT) — шаблон для Visual Studio для создания универсальных приложений для Windows и Windows Phone на базе веб-сайта.d3ca23c74fba44fd9f8df7fe235ec87d.png

Для работы вам понадобятся:

Ваш сайт (в идеале, с адаптивной версткой) Windows 8.1 Visual Studio 2013+ Расширение WAT Установка дополнения Web App Template Для того, чтобы установить WAT, вам необходима Windows 8.1 и Microsoft Visual Studio с последними обновлениями. Загрузите установочный VSIX файл с сайта wat.codeplex.com и установите шаблон.

d817f00dfd9b4ab0a073b532932fce9f.png

Создание проекта Web Application Template Создайте проект Web App Template, он будет находиться по пути: File> New > Project > Templates > JavaScript > Web App Template for Universal Apps83485699346a4f52891661e4fb6cbe22.png

Будет создано универсальное приложение для Windows и Windows Phone, состоящее из пяти проектов — проект Windows, проект Windows Phone, общие файлы для проектов Windows и Windows Phone, а также внутренние C#-проекты.

Если сейчас запустить проекты для Windows и Windows Phone, то запустится приложение и загрузится страница с документацией по шаблону Web App Template.

4cdb128281f04ae0b1d70b5c7aa9f8a1.png

Давайте посмотрим на структуру проектов Windows и Windows Phone и проекта с общими файлами (Shared), а также разберемся с настройками шаблона.

Структура проектов Windows и Windows Phone и Shared В проекте приложения находится большое количество различных файлов. Мы рассмотрим те, в которых определяются основные настройки Web App Template.51f79f7871f14e15b10351f615ee18fc.png

Файлы, находящиеся в проекте Windows и Windows Phone, идентичны, в основном они относятся к общим настройкам приложения для конкретной платформы. Обратите внимание на файл package.appxmanifest — файл манифеста приложения, который нужен при подготовке приложения к публикации. В нем указываются основные настройки вашего приложения, информация о необходимых для его работы функциях, устройствах, а также файлах картинок (для иконок, бейджев, тайлов). Подробно о нем можно узнать в MVA курсе «Размещение и продвижение приложений в Windows Store.

Давайте перейдем к проекту с общими файлами. Первая папка в нем — папка config, с файлами config.es.json, config.json, config.sample.json и files.json.

config.json — главный файл приложения. Он используется для добавления основных настроек приложения — определения веб-сайта приложения (главной страницы), добавления элементов управления (панелей управления, навигации, кнопки назад), поддержки оффлайн режима, уведомлений и т.д.

Файл config.es.json отвечает за локализацию приложения, в нем прописаны основные языковые настройки (перевод фраз, подсказок). В стандартном шаблоне в качестве примера находится файл для языковых настроек испанского языка. Вы можете создавать файлы локализации для каждого поддерживаемого языка, он будет применяться в приложении автоматически. В файле config.sample.json находятся примеры всех настроек, которые вы можете применить в вашем приложении.

Следующая папка, CSS — папка с файлами, определяющими стиль вашего приложения. Injected-styles.css отвечает за CSS стили сайта, для которого вы делаете приложение, а файл wrapper-styles.css используется для стилизации таких объектов приложения, как navbar и appbar и т.д.

В папке template находятся JavaScript файлы реализации WAT, например, обработка геолокации, уведомлений, оффлайн режима, поиска и т.д.

Если уже использовали WAT ранее, обратите внимание на папки, которые добавились в WAT версии 2.2:

Папка schema в проекте с общими файлами. В ней содержится файл schema-manifest.json. Это файл схемы для файла config.json. В нем описывается каждая функция, ее тип, описание и значение по умолчанию. Папка strings. Там находятся папки с доступными локализациями, т.е. файлы, в которых мы указываем перевод стандартных фраз в приложении. e8db91ff7bc34faaa3edf8574b65a9f1.pngТакже обратите внимание на возможность удаленного редактирования файла config.json. Для того, чтобы заменить файл, в панели настроек выберите пункт «Change Config Host Address»

eaf45c5eed064b0b907eb562bb0003b6.png

Затем введите адрес нового config файла:

e504eecd0f6a47b29f5180244566ee2d.png

В таблице, расположенной ниже, представлено описание всех основных файлов проекта. Мы же перейдем к знакомству с файлом config.json и посмотрим доступные для нашего приложения настройки.

83a944e21a6e4071a4fa6a8ea556c5d4.png

Структура файла config.json Все основные настройки для нашего шаблона находятся в файле config.json. Формат config.js базируется на стандарте W3C Application Manifest, добавляя в него расширения, специфичные для WAT.В нем вы определяете главную страницу вашего приложения, навигацию по странице, настройки панели приложения и панели навигации панели чудо-кнопок, а также поддержку оффлайн режима и т.д.

Полную документацию по файлу config.json вы можете найти здесь — http://wat-docs.azurewebsites.net/, а ниже я приведу таблицу с частичным переводом документации:

Развернуть таблицу с документацией Название блока настройки Описание Пример кода start_url Главная страница вашего приложения «wat_navigation»: { «hideOnPageBackButton»: false, «hideBackButtonOnMatch»: [ »{baseURL}/Json#livetiles» ], «pageLoadingPartial»:»/template/partials/page-loading.html» }, wat_errors Определяет страницу с сообщением об ошибке «wat_errors»: { «showAlertOnError»: false, «alertMessage»: «Произошла ошибка. Приносим извинения.», «redirectToErrorPage»: false, «errorPageURL»: «error-example.html» }, wat_logging Задает настройки логов приложения «wat_logging»: { «enabled»: true, «level»: «log», «disableWithoutDebugger»: false, «hideTagDisplay»: true, «ignoreTags»: [ «winjs» ], «logErrorsForIgnoredTags»: true, «overrideConsoleMethods»: true, «disableConsoleLog»: false, «fileLog»: { «enabled»: true, «level»: «info», «filename»: «logs\\wat-docs_%D.log», «format»:»%L on Line %l of %f\r\n%D %T: %M (%t)», «maxLogFiles»: 7 } }, wat_offline Определяет поведение приложения в оффлайн режиме «wat_offline»: { «enabled»: true, «message»: «Отсутствует интернет соединение. Переподключитесь для дальнейшей работы приложения.», «superCache»: { «enabled»: false, «baseDomainURL»: «http://wat-docs.azurewebsites.net/», «addIndexedDBSupport»: true, «imagesGuardBand»: true, «preCacheURLs»: [], «ignoreURLs»: [] } }, wat_geoLocation Включает/выключает поддержку геолокации «wat_geoLocation»: { «enabled»: true }, wat_customScript Массив скриптов, расположенных в пакете приложения, которые содержатся в DOM «wat_customScript»: { «scriptFiles»: [ «injection-script-example.js» ] }, wat_appBar Элемент управления, находящийся внизу страницы «wat_appBar»: { «enabled»: true, «makeSticky»: false, «buttons»: [ { «label»: «Settings», «icon»: «edit», «action»: «settings» }, ] }, wat_navBar Элемент управления, находящийся сверху страницы «wat_navBar»: { «enabled»: true, «maxRows»: 2, «makeSticky»: true, «buttons»: [ { «label»: «home», «icon»: «home», «action»: «home» }] }, wat_livetile Определяет уведомления, появляющиеся на плитках «wat_livetile»: { «enabled»: true, «periodicUpdate»: 1, «enableQueue»: true, «tilePollFeed»: «http://wat-docs.azurewebsites.net/feed» }, wat_redirects Управляет внешними URL » wat_redirects»: { «enabled»: true, «enableCaptureWindowOpen»: true, «refreshOnModalClose»: true, «rules»: [ { «pattern»: «http://getbootstrap.com?», «action»: «showMessage», «message»: «Sorry, but you can’t access this feature in the native app, please visit us online at http://wat-docs.azurewebsites.net» }, { «pattern»: «http://msdn.microsoft.com/*», «action»: «popout» }] }, wat_settings Определяет свойства чудо-кнопки «настройки» «wat_settings»: { «enabled»: true, «privacyUrl»: «http://wat-docs.azurewebsites.net/Privacy», «items»: [ { «title»: «Support», «page»: «http://wat-docs.azurewebsites.net/Support», «loadInApp»: true }, { «title»: «Codeplex Site», «page»: «http://www.codeplex.com» } ] }, wat_share Задает настройки чудо-кнопки «поделиться» «wat_share»: { «enabled»: true, «showButton»: true, «buttonText»: «Share», «buttonSection»: «global», «title»: «WAT Documentation», «url»:»{currentURL}», «screenshot»: true, «message»:»{url} shared with {appLink} for Windows Phone and Windows 8 Store apps.» }, wat_search Определяет свойства чудо-кнопки «поиск» «wat_search»: { «enabled»: true, «searchURL»: «http://wat-docs.azurewebsites.net/search/? query=», «useOnScreenSearchBox»: true, «onScreenSearchOptions»: { «chooseSuggestionOnEnter»: true, «focusOnKeyboardInput»: true, «placeholderText»: «What are you looking for?», «searchHistoryDisabled»: true } }, wat_secondaryPin Задает настройки для плиток на рабочем столе «wat_secondaryPin»: { «enabled»: true, «buttonText»: «Pin It!», «tileTextTheme»: «light», «buttonSection»: «global», «squareImage»:»/images/logo.scale-100.png», «wideImage»:»/images/widelogo.scale-100.png» }, В качестве небольшого примера давайте стилизуем блок header. Напомню, блок header определяет свойства верхней части нашей страницы. Вы можете настроить его цвет, видимость заголовка страницы и отображение header«a в целом. «wat_header»: { «enabled»: true, «backgroundColor»:»#478EFF», «navDrawerBackgroundColor»:»#375569», «logo»:»/images/widelogo.scale-100.png», «title»: { «enabled»: true, «displayOnHomePage»: true } } 7f857ee748fb491b8c68ad79eb449e80.png

Как вы видите header добавился. Видно, что для Windows приложения этого сайта он выглядит симпатично, а для Windows Phone приложения header явно лишний.

Обратите внимание:

Чаще всего config.json находится в проекте с общими файлами (shared). Но, иногда, бывают случаи, когда мы разделяем файл config.json на два проекта — отдельно для проекта Windows и отдельно для проекта Windows Phone. К разделению файла по проектам мы прибегаем, например, в случае, если у нас есть специальная мобильная версия сайта, соответственно, стартовые страницы (startURL) для Windows и Windows Phone проекта будут разными. Иногда также удобно разделить файлы по проектам, когда в разных проектах нам необходимы разные элементы управления (приведенный выше пример с header).

Мы с вами разобрались с тем, что такое веб-приложения и как научиться создавать их при помощи шаблона Web App Template. В следующей статье мы посмотрим, как применить полученные знания и создать веб-приложение сайта Habrahabr.ru.

Дополнительные ссылки

© Habrahabr.ru