Bring your web apps to Windows 10 devices, including hosted web apps
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
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:
– 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:
– 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:
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
If (Windows type! == ‘Undefined’ &&
typeof Windows.UI! == ‘Undefined’ &&
typeof Windows.UI.Notifications! == ‘Undefined’).
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.