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

Всем привет!

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

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

Зачем нужны веб-приложения, если есть веб-сайты

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

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

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

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

И это лишь первое, что приходит в голову, а ведь есть же еще механизмы монетизации, интеграция с внешними устройствами и много чего еще.

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

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

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

Шаблон для создания веб-приложений – Web App Template

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

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

1. Ваш сайт (в идеале, с адаптивной версткой)
2. Windows 8.1
3. Visual Studio 2013+
4. Расширение WAT

Установка дополнения Web App Template

Для того, чтобы установить WAT, вам необходима Windows 8.1 и Microsoft Visual Studio с последними обновлениями. Загрузите установочный VSIX файл с сайта wat.codeplex.com и установите шаблон.

Создание проекта Web Application Template

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

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

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

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

Структура проектов Windows и Windows Phone и Shared

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

Файлы, находящиеся в проекте 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. Там находятся папки с доступными локализациями, т.е. файлы, в которых мы указываем перевод стандартных фраз в приложении.

Также обратите внимание на возможность удаленного редактирования файла config.json. Для того, чтобы заменить файл, в панели настроек выберите пункт «Change Config Host Address»

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

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

Структура файла config.json

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

В нем вы определяете главную страницу вашего приложения, навигацию по странице, настройки панели приложения и панели навигации панели чудо-кнопок, а также поддержку оффлайн режима и т.д.

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

"wat_navigation": {
"hideOnPageBackButton": false,
"hideBackButtonOnMatch": [
"{baseURL}/Json#livetiles"
],
"pageLoadingPartial": "/template/partials/page-loading.html"
},

"wat_errors": {
"showAlertOnError": false,
"alertMessage": "Произошла ошибка. Приносим извинения.",
"redirectToErrorPage": false,
"errorPageURL": "error-example.html"
	},

"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 %frn%D %T: %M (%t)",
"maxLogFiles": 7
}
},

"wat_offline": {
"enabled": true,
"message": "Отсутствует интернет соединение. Переподключитесь для дальнейшей работы приложения.",
        "superCache": {
    "enabled": false,
            "baseDomainURL": "http://wat-docs.azurewebsites.net/",
    "addIndexedDBSupport": true,
    "imagesGuardBand": true,
            "preCacheURLs": [],
            "ignoreURLs": []
        }
}, 

"wat_geoLocation": {
 "enabled": true
},

"wat_customScript": {
"scriptFiles": [
"injection-script-example.js"
	]
},

"wat_appBar": {
"enabled": true,
"makeSticky": false,
"buttons": [
{
"label": "Settings",
"icon": "edit",
"action": "settings"
},
]
},

"wat_navBar": {
"enabled": true,
"maxRows": 2,
"makeSticky": true,
"buttons": [
{
"label": "home",
"icon": "home",
"action": "home"
}]
},

"wat_livetile": {
"enabled": true,
"periodicUpdate": 1,
"enableQueue": true,
"tilePollFeed": "http://wat-docs.azurewebsites.net/feed"
},

" 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": {
"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": {
"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": {
"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": {
        "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
        }
    }

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

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

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

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

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

• MVA курс по созданию универсальных вебприложений при помощи Web App Template
• Скачать Web App Template
• Документация по Web App Template
• Загрузить бесплатную или пробную Visual Studio
• Попробовать Microsoft Azure
• Изучить курсы Microsoft Virtual Academy

Автор: a_bogdanova

Источник