A Windows platform

Windows 10 is definitely an exciting platform for developers like me. Windows 10 is going somewhere – literally. You may be wondering what I mean by that. Okay, Windows 10 is going to be a single OS which will be a common thing among many devices. We have desktop PCs, phones, Xboxes, Surface Hubs and IoT devices – it would not be nice to have the same OS for all these different hardware. Microsoft made it possible with Windows 10. “One Windows Platform” that prefers to call Microsoft

Figure 1. A Windows platform

Device family:

The beauty of Windows 10 is that programmers no longer target the OS but one or more device families. A device family is nothing but a specific set of API system features and behaviors that are available on a specific set of devices and will be given a name and version number. Figure 2 illustrates the device families that make up the Windows 10 platform:

Figure 2. Windows 10 device family

To make it easier, PCs run desktop OS which is part of desktop device family, phones and tablets run mobile OS which is part of mobile device family etc. The Universal Device Family is a special device family that acts as a parent and its set. Children’s device families are inherited from the API. This ensures that the original public APIs are present in every child device family or device. This concept of device families makes it easy to run your Windows 10 apps on any or all devices, from desktops, phones, tablets, Xboxes, and more.

Universal Windows Apps

Windows 10 has introduced a new programming model for creating apps on this platform. This is called UWP or Universal Windows Platform. We’ve talked about device families, and UWP lets you take your app to any or all device families. You can now create a single app package that can be installed on a variety of devices. This opens a new dimension for me as a Windows Phone developer. I was more focused on the phone as it was easier to make for the phone. But now the same code can reach different types of devices and it really pumps me.

Web apps as universal Windows apps

Cycle Engine Powered by Microsoft Edge, Microsoft has come up with a great way to bring responsive web applications hosted on your server as a universal Windows app. Yes you heard 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 that allows you to bring your web applications to Windows 10. The Hosted Web App is nothing more than your web site that you created using your familiar tools and hosted on your favorite. The web host will now render from a UWP app using the cycle engine. Now you have the ability to publish your web site as an app in the Windows Store and an end user can download and install it. With the workflow that you have been following so far, you can continue to develop your web site.

Figure 3. Briefly hosted web app
Learn more on the Microsoft Edge Web Dave website.

Creating a Hosted Web App:

Creating a hosted web app is fairly easy. Assuming you have Visual Studio 2015, you can follow the steps below to create a hosted web app:
– Fire Visual Studio 2015. Select File> New Project. In the New Project dialog, select JavaScript> Windows> Universal from the installed template. Then select Blank App (Universal Windows) App Template. Give it a name and click OK. For demo purposes I will give it a name of “MyHostedApp”

Figure 4. JavaScript Universal Blank Windows App Template

– Once the Visual Studio solution is finished, delete everything from the solution except the “Image” folder, temporary key, and package manifest file. Your solution should now be as follows:

Figure 5. Hosted Web App UWP Solution Structure

– Open the package.appxmanifest file as an XML file. Right click on the file and select “View Code”. The XML editor will open the file for editing. Find Applications> Application Node. The application node has a startpage feature. All we need to do is set the URL of our web app running on the remote host. I will use the website www.amazon.in as an example for this article. Amazon India is one of the leading ecommerce sites in India. Here is the code snippet of the changes you need to make:

3

– Next, we need to add application content Uri rules. These rules tell the UWP Framework that remote URLs require access to the Windows API. Here you need to add the code snippet as the child node of the application node:

Type = “included”
WindowsRuntimeAccess = “all” />

– Press F5 to run the app
Below is a screenshot of the app we ran when running as a desktop PC and when running on a Windows 10 mobile device:

Figure 6. Hosted web app running on a desktop PC

Figure 7. Hosted web app running on a Windows 10 mobile

Access to Windows Runtime API

Now that we’ve created a UWP app, the real fun is still there. One of the features of the hosted web app is that the UWP platform allows you to access the Windows runtime API directly from your web application JavaScript code. Yes all native API access is available such as notification, cortana etc.

Let’s take a look at how we can launch the Windows Notification API from our web application JavaScript code. The following code snippet shows you how to access the Notification API:

If (Windows type! == ‘Undefined’ &&
typeof Windows.UI! == ‘Undefined’ &&
typeof Windows.UI.Notifications! == ‘Undefined’).
Call //Windows.UI.Notifications
A

This is just the tip of the iceberg. What we saw above is the launch of the Windows 10 Notification API from our JavaScript code. While the site is running on a remote server, the UWP platform allows us to hook into the Windows 10 API using the “Windows” object. Similarly you can integrate Cortana so that Cortana understands the user’s discourse and can perform tasks on your site. The possibilities are endless.

Unpacking:

The web app hosted on Windows 10 makes your responsive web site accessible to over 75 million devices as a universal Windows platform application. Hosted Web App lets you continue to build your web site with the tools of your choice and host it on your favorite web host, providing a unique Windows 10 experience for your end users. If you have a web app, get it as a hosted web app on Windows 10 and I would say access to a variety of devices.

Click here to see if your website meets the interoperable web standards and is ready for a variety of modern browsers, including Microsoft Edge.