Create universal web applications with the Web App Template

Hello!

Today we will get to know the tool for creating web applications for Windows and Windows Phone - Web Application Template.

In this article we will understand what web applications are and why they are needed, and also see how the Web Application Template can help you in creating web applications.

Why do we need web applications if there are websites

If you follow the development of web technologies, then you could easily notice that the border between websites and (native) applications is gradually blurring. Moreover, it’s not only the technological ability to use the web stack to develop native applications (for example, under Windows 8.x and Windows Phone 8.1 or Firefox OS), but also from the point of view of UX (for example, the recent announcement of the alpha version of the next version Yandex.Browser is clearly moving in this direction).



Attempts to use the web stack to develop applications have a long history: remember at least HTA for Windows. Similarly, from time to time, attempts are made to "turn" sites into applications, and not only from the point of view of internal content (for example, outlook.com is actually a mail application, and the web version of Microsoft Office really allows you to edit and view office documents), but also from the point of view of integrating such sites into the operating system under the guise of applications (here it’s enough to recall the idea of ​​fixed sites in Internet Explorer, although this is not the only approach to this idea in the industry). With the development of application stores, these ideas acquire new features, both of a marketing nature (and what if we distribute the site through the application store), as well as technical,

Today, the desire to turn a website into a (native) web application has a lot of opportunities to expand interaction with people on the other side of touch screens:

1. (Controlled) access to various functions of the device and the operating system, which are usually hidden behind the browser sandbox, do not yet have an analogue in the form of the corresponding web standard or simply are not supported by the visitor’s browser. For example, you can access the user's address book or camera.
   
   
2. A website usually needs constant access to the Internet (the convenience of using AppCache is a topic for another discussion). In the case of the application, the developer can flexibly configure the application in offline mode - you can pre-cache the necessary resources, including in the background.
   
   
3. You can integrate into the web application the controls of the system under which you make the application, mimicking in this way the familiar environment.
   
   
4. Another plus in the piggy bank of web applications is support for push notifications. Push notifications are an additional feature of user interaction. Tell them about the promotions of your online store or update the information about new messages on the phone tile!

And this is just the first thing that comes to mind, and yet there are also monetization mechanisms, integration with external devices, and much more.

Thus, using a web application, you can expand the capabilities of your website, make it more interactive and integrate various additional, previously inaccessible, functions into it.

Basically, there is nothing complicated about wrapping your website in an application on your own. Take Webview - and wrap.

The devil, however, as always buried in the details, so we made a ready-made engine for such tasks. The engine is called WAT (although the name contains the word template, there really is a whole engine!). By the way, open source.

Web Application Template - Web App Template

Web Application Template (WAT) is a template for Visual Studio for creating universal applications for Windows and Windows Phone based on a website.



For work you will need:

1. Your site (ideally, with adaptive layout)
   
2. Windows 8.1
   
3. Visual Studio 2013+
   
4. WAT extension
   

Installing the Web App Template Add-on

In order to install WAT, you need Windows 8.1 and Microsoft Visual Studio with the latest updates. Download the VSIX installation file from wat.codeplex.com and install the template.

Creating a Web Application Template Project

Create a Web App Template project, it will be located on the path: File > New > Project > Templates > JavaScript > Web App Template for Universal Apps



A universal application for Windows and Windows Phone will be created, consisting of five projects - the Windows project, the Windows Phone project, common files for Windows and Windows Phone projects, as well as internal C # projects.

If you start projects for Windows and Windows Phone now, the application will start and the page with the documentation for the Web App Template will load.



Let's look at the structure of Windows and Windows Phone projects and the project with shared files (Shared), as well as deal with the template settings.

Project Structure for Windows and Windows Phone and Shared

The application project contains a large number of different files. We will look at those that define the basic settings for the Web App Template.



The files located in the Windows project and Windows Phone are identical, basically they relate to the general application settings for a specific platform. Pay attention to the package.appxmanifest file, the application manifest file that is needed when preparing the application for publication. It indicates the basic settings of your application, information about the necessary functions, devices, as well as image files (for icons, badges, tiles). You can learn more about it in the MVA course, “Hosting and Promoting Applications in the Windows Store .

Let's move on to the project with shared files. The first folder in it is the folderconfig , with files config.es.json , config.json , config.sample.json and files.json .

config.json is the main application file. It is used to add the basic settings of the application - determining the application website (main page), adding controls (control panels, navigation, back buttons), supporting offline mode, notifications, etc. Config.es.json

fileHe is responsible for the localization of the application, it contains the basic language settings (translation of phrases, tips). In the standard template, an example is a file for the Spanish language settings. You can create localization files for each supported language, it will be applied in the application automatically. The config.sample.json file contains examples of all the settings that you can apply in your application.

The next folder, CSS is the folder with the files that define the style of your application. Injected-styles.css is responsible for the CSS styles of the site for which you are creating the application, and the wrapper-styles.css file is used to style application objects such as navbar and appbaretc.

The template folder contains JavaScript WAT implementation files, for example, processing geolocation, notifications, offline mode, search, etc.

If you have already used WAT before, pay attention to the folders that were added to WAT version 2.2:

• The schema folder in the project with shared files. It contains the schema-manifest.json file. This is the schema file for the config.json file. It describes each function, its type, description and default value.
  
• Folder strings . There are folders with available localizations, i.e. files in which we indicate the translation of standard phrases in the application.

Also note the ability to remotely edit the config.json file . In order to replace the file, select “Change Config Host Address” in the settings panel.



Then enter the address of the new config file:



The table below contains a description of all the main project files. We will proceed to get acquainted with the config.json file and see the settings available for our application.

Config.json file structure

All the basic settings for our template are in the config.json file . The config.js format is based on the W3C Application Manifest standard, adding WAT-specific extensions to it.

In it, you define the main page of your application, page navigation, settings of the application panel and navigation panels of the charms bar, as well as support for offline mode, etc. You can find the

full documentation on the config.json file here - http://wat-docs.azurewebsites.net/ , and below I will give a table with a partial translation of the documentation:


As a small example, let's style the header block . Let me remind you that the header block defines the properties of the top of our page. You can adjust its color, the visibility of the page title and the display of the header as a whole.

"wat_header": {
        "enabled": true,
        "backgroundColor": "#478EFF",
        "navDrawerBackgroundColor": "#375569",
        "logo": "/images/widelogo.scale-100.png",
        "title": {
            "enabled": true,
            "displayOnHomePage": true
        }
    }

As you can see, the header has been added. It can be seen that for the Windows application of this site it looks pretty, and for the Windows Phone application the header is clearly superfluous.

Please note:

Most often, config.json is in a project with shared files. But, sometimes, there are times when we split the config.json file into two projects - separately for the Windows project and separately for the Windows Phone project. We resort to file separation by projects, for example, if we have a special mobile version of the site, respectively, the start pages ( startURL ) for the Windows and Windows Phone projects will be different. Sometimes it’s also convenient to separate files by project, when in different projects we need different controls (the above example with header)

We have figured out what web applications are and how to learn how to create them using the Web App Template. In the next article, we will look at how to apply the acquired knowledge and create a web application for the Habrahabr.ru website.

Sitelinks

• MVA Universal Web Application Creation Course Using Web App Template
• Download Web App Template
• Web App Template Documentation
• Download Free or Trial Visual Studio
• Try Microsoft Azure
• Learn Microsoft Virtual Academy courses