Creating Universal Web Applications Using the Web App Template

Hello!

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

In this article, we'll figure out what web applications are and why they are needed, and also see how the Web Application Template can help you when building web applications.

')

Why do we need web applications if there are websites

If you follow the development of web technologies, you could easily notice that the border between web sites and (native) applications is gradually erased. And it's not just a technological opportunity 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 in general from the point of view of the UX (for example, the recent announcement of the alpha version of the next version Yandex Browser is obviously moving in this direction).



Attempts to use the web stack for developing applications have a long history: to recall at least HTA for Windows. Similarly, attempts are made from time to time to “turn” websites into applications, and not only from the point of view of internal content (for example, outlook.com is actually an email application, and the web version of Microsoft Office really allows editing and viewing office documents) but also from the point of view of the integration of such sites into the operating system under the guise of applications (it is enough to recall the idea of ​​the fixed sites in Internet Explorer, although this is not the only approach to this idea in the industry). With the development of app stores, these ideas acquire new features, both of a marketing nature (and what if we distribute the site through the app store) and technical, especially in the case of platforms without native support for HTML / JS (usually solved through WebView or analogues and above them).

Today, the desire to transform a website into a (native) web application has many 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 a corresponding web standard or are simply not supported by the browser of the site visitor. For example, you can access a 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 a separate conversation). In the case of an application, the developer can use the flexible configuration of 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 are creating the application, thus mimicking the familiar environment.
   
   
4. Another plus in the web applications collection is support for push notifications. Push notifications are an additional opportunity to interact with the user. Tell them about the promotions of your online store or update the information on new messages on the phone tile!

And this is only the first thing that comes to mind, and there are still 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 into it various additional, previously unavailable functions.

In principle, there is nothing complicated about independently wrapping your website in an application. Take a Webview - and wrap.

The devil, however, as always, is buried in detail, so we made the finished engine for such tasks. The engine is called WAT (although there is a word template in the title, there’s really a whole engine!). By the way, open source.

Web Application Template

Web Application Template (WAT) - a template for Visual Studio for creating universal web-based applications for Windows and Windows Phone.



For work you will need:

1. Your website (ideally, with responsive 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 along 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 - a Windows project, a Windows Phone project, common files for Windows and Windows Phone projects, as well as internal C # projects.

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



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.

The structure of the projects Windows and Windows Phone and Shared

There are a large number of different files in the application project. We will look at those that define the basic settings of the Web App Template.



Files located in a Windows and Windows Phone project are identical, mostly they refer to the general application settings for a specific platform. Pay attention to the package package.appxmanifest - the application manifest file, which is needed when preparing an application for publication. It contains the main settings of your application, information about the functions, devices, and files of images (for icons, badges, tiles) necessary for its operation. Details about it can be found in the MVA course "Placement and promotion of applications in the Windows Store .

Let's move on to the project with shared files. The first folder in it is the config folder, 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 main settings of the application - the definition of the website of the application (the main page), the addition of controls (control panels, navigation buttons, back buttons), support for offline mode, notifications, etc.

The file config.es.json is responsible for the localization of the application, it contains the basic language settings (translation of phrases, hints). In the standard template, as an example, there is a file for Spanish language settings. You can create localization files for each supported language, it will be applied in the application automatically. The file config.sample.json 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 building the application, and the wrapper-styles.css file is used to style the application’s objects such as navbar and appbar , etc.

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

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

• The schema folder in a 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 accessible localizations, i.e. Files in which we specify the translation of standard phrases in the application.

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



Then enter the address of the new config file:



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

The structure of the config.json file

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 for the application bar and the navigation bar of the charms button, as well as support for offline mode, etc.

Full documentation on the config.json file can be found here - http://wat-docs.azurewebsites.net/ , and below I will provide 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 customize its color, visibility of the page header 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 Windows applications of this site it looks nice, and for Windows Phone applications, the header is clearly superfluous.

Note:

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

We 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 this knowledge and create a web application for Habrahabr.ru.

Additional links

• MVA course on creating universal web applications using the 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