Hosted web apps just got better & easier to build with Windows 10. Read on as Lohith GN shares his journey.
One Windows Platform
Windows 10 is for sure an exciting platform for developers like me. Windows 10 will be going places – literally. You may be wondering what I mean by that. Well, Windows 10 is going to be the single OS that will be a common thing amongst a lot of devices. We have Desktop PCs, Phone, XBOX, Surface Hub and IoT devices – wouldn’t it be nice that I get the same OS on all of these heterogeneous hardware’s. With Windows 10 Microsoft has made that possible. “One Windows Platform” is what Microsoft likes to call
Fig 1. One Windows Platform
Device Families:
Beauty of Windows 10 is that programmers do not target OS anymore but rather target one or more device families. A device family is nothing but a specific set of API’s system characteristics & behaviors that are available on a particular set of devices and will be given a name & version number. Fig 2 illustrates the device families that make up Windows 10 platform:
Fig 2. Windows 10 Device Family
To make it simple, PCs run desktop OS which is part of the desktop device family, Phones & Tablets run Mobile OS which is part of the Mobile Device Family etc. Universal Device Family is a special device family which acts like a parent and its set of API’s are inherited by the child device families. Thus the core universal API’s are guaranteed to be present on each child device family or on every device. This concept of device families makes it easy for your Windows 10 Apps to run on any or all of variety of devices which includes Desktop, Phone, Tablet, Xbox and so on.
Universal Windows Apps
Windows 10 introduces a new programming model for building apps on this platform. It’s called UWP or Universal Windows Platform. We spoke of the device families and UWP allows you to take your app to any or all of the device families. You can now create a single app package that can be installed onto a wide range of devices. As a Windows Phone developer this opens a new dimension for me. I was more concentrated towards Phone as it was easy to build for phone. But now same code can reach a wide variety of devices and that really pumps me up.
Web Apps as Universal Windows Apps
With Chakra engine powering the Microsoft Edge, Microsoft has come up with a fantastic way to bring your responsive Web Application hosted on your server as a Universal Windows App. Yes you heard it right – Your Web Application running on your web server can be packaged and made available as a UWP App on 75 Million Windows Devices. Codenamed “Project Westminster”, Hosted Web App is a technology by which you can bring your web applications to Windows 10. Hosted Web App is nothing but your web site that you have developed using the tools you are familiar with & hosted it on your favorite web host will be now rendered from a UWP app using the Chakra engine. Now you have the ability to publish your web site as an app in Windows Store and an end user can download & install it. You can continue to develop your web site with whatever workflow you have been following so far.
Fig 3. Hosted Web App in a nutshell
Learn more at the Microsoft Edge web dev website.
Creating a Hosted Web App:
Creating a hosted web app is fairly simple. Assuming you have Visual Studio 2015, you can follow the below steps to create a hosted web app:
– Fire up Visual Studio 2015. Select File > New Project. In New Project dialog, select JavaScript > Windows > Universal from the installed templates. Next select Blank App (Universal Windows) App template. Give it a name and click Ok. For demo purpose I will give it a name of “MyHostedApp”
Fig 4. JavaScript Universal Blank Windows App template
– Once Visual Studio has finished creating the solution, delete everything from the solution except “Images” folder, temporary key and the package manifest file. Your solution should like below now:
Fig 5. Hosted Web App UWP Solution Structure
– Open package.appxmanifest file as a XML file. Right click on the file and select “view Code”. XML Editor will open the file for editing. Find Applications > Application node. Application node has a StartPage attribute. We just need to set the URL of our web app running on a remote host. For this article I will be using www.amazon.in website as an example. Amazon India is one of the leading ecommerce sites in India. Here is the code snippet of the changes you have to make:
<Application Id="App" StartPage="http://www.stayzilla.com">
– Next, we need to add Application Content Uri Rules. These rule tell the UWP framework what remote URLs need access to Windows API. Here is the code snippet you will need to add as a child node of Application node:
<uap:ApplicationContentUriRules>
<uap:Rule Match="http://www.amazon.in"
Type="include"
WindowsRuntimeAccess="all" />
</uap:ApplicationContentUriRules>
– Press F5 to run the app
Below are screenshots of the app we just did when run as a Desktop PC & when run on a Windows 10 Mobile device:
Fig 6. Hosted Web App running on a desktop PC
Fig 7. Hosted Web App running on a Windows 10 Mobile
Access to Windows Runtime API
Now that we have created a UWP app, the real fun is yet to happen. One of the features of Hosted Web App is the UWP platform makes it possible to access native Windows Runtime API right from your Web Application JavaScript code. Yes all the native API access is available such as Notification, Cortana etc.
Let’s take a look at how we can invoke Windows Notification API right from our Web Application JavaScript code. Below code snippet showcases how to access the Notification API:
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.UI.Notifications !== 'undefined') {
//Call Windows.UI.Notifications
}
This is just the tip of the ice berg. What we have seen above is invoking the Windows 10 Notification API right from our JavaScript code. Although the site is running on a remote server the UWP platform allows us to hook into Windows 10 APIs using the “Windows” object. Similarly you can integrate Cortana so that Cortana can understand user’s speech and perform action on your site. Possibilities are endless.
Wrapping Up:
Hosted Web App on Windows 10 makes it possible to get your responsive web sites reach over 75 million devices as a Universal Windows Platform Application. Hosted Web App lets you continue to build your web site with your favorite tools & host it on your favorite web host and all the while providing a unique Windows 10 experience to your end users. You have a web app get it on Windows 10 as a Hosted Web App I would say and reap the benefit of reaching variety of devices.
Follow Us
