Page 48 - MSDN Magazine, April 2017

UWP APPS
Develop Hosted
Web Apps for UWP
Sagar Bhanudas Joshi
Many developers and companies create Web interfaces for their products and services for easy discoverability and access. Another platform is the apps platform. Native apps provide richer UX and functionality than Web apps. Now, Project Westminster pro- vides developers a way to convert modern Web sites into native apps.
The Project Westminster bridge enables Web developers to bring their responsive Web applications to the Universal Windows Platform (UWP) by leveraging existing code (see the “Project West- minster in a Nutshell” Windows Developer blog post at bit.ly/2jyhVQo). The idea of this “bridge” is to help reuse existing Web site code and add a layer for UWP-specific code to form the integration points of the Web app with an underlying Windows platform. The blog post discusses a few coding practices to ensure consistent UX.
How can a Web developer integrate a modern Web application to work with, let’s say, Cortana? The answer is through the common denominator, JavaScript. Windows exposes the app framework func- tionality (Windows Runtime APIs) through JavaScript and the Windows namespace. The resulting apps are referred to as Hosted Web Apps.
In this article, I’ll share what I’ve learned in working with Independent Software Vendors (ISVs) and partners to port their apps to the UWP through the Project Westminster tool. The focus here is to share details on how to best align Web apps for delivering the best UX while running as a platform app.
Getting Started
TogetstartedwiththeProjectWestminstertool,youfirstneedtocon- vert your Web site to the UWP (see the Channel 9 video, “Creating Hosted Web Apps with Project Westminster,” at bit.ly/2jp4srs).
As a preliminary test—to be sure the Web site renders as expected and the presentation looks consistent—you should test it on the Microsoft Edge browser. This will help identify and fix any rendering issues before coding integrations for Windows functionality begin.
Most Web sites have a few common features, which enable users to either complete a specific task (like filling out forms) or take away information for their reference (like downloading a manual). In such scenarios, it’s critical that these functionalities remain intact and the newly generated hosted Web app’s experience is con- sistent with the original Web site. Some of these scenarios might
This article discusses:
• File downloads scenario in hosted Web apps • Session management and the back button
• Voice commands and Live Tiles integration Technologies discussed:
Project Westminster, Windows Runtime, Hosted Web Apps
Code download available at:
bit.ly/2k5FlJh
34 msdn magazine