company_banner

Создание универсальных веб-приложений при помощи 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/, а ниже я приведу таблицу с частичным переводом документации:

    Развернуть таблицу с документацией
    Название блока настройки Описание Пример кода
    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
            }
        }
    




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

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

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

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

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


    Метки:
    • +13
    • 25,2k
    • 2
    Microsoft 400,43
    Microsoft — мировой лидер в области ПО и ИТ-услуг
    Поделиться публикацией
    Комментарии 2
    • +8
      Простите, но…
      image
      • 0
        А как WAT соотносится с WinJS. Или это два отдельных продукта для одного и того же?

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое