Migrating a web app (HTML)

  • [アーティクル]

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Here you'll find specific considerations and steps to follow when you port an existing web app to a Windows Store app using JavaScript.

For the purposes of this discussion, a web app is defined as a front-end web component that has most of its functionality provided in an HTML document and is executed by the browser itself: in other words, it does not rely on ASP.NET, PHP or other back-end server technologies. If you want to migrate an app that has a server or back-end component, such as a database or middle-tier object, see Migrating your web site.

You can find more info about the differences between Windows Store apps using JavaScript and web apps at Windows Store apps using JavaScript with JavaScript versus traditional web apps.

A Windows Store app using JavaScript is similar to an app you might develop for Microsoft Internet Explorer 9 and later, or for any HTML5-compatible browser. It typically consists of components, documents, resources and behaviors developed by using the following technologies:

  • HTML (HTML5)
  • CSS (CSS3)
  • JavaScript (ECMAScript)

The process that hosts and executes a Windows Store app using JavaScript is called WWAHost.exe. This process provides a superset of functionality greater than that provided by the Microsoft Internet Explorer browser. Therefore, if your web app runs under Internet Explorer (and does not incorporate the unsupported technologies listed later in this topic), it can also easily be run under WWAHost.exe.

In addition, a Windows Store app using JavaScript can take advantage of Windows-specific libraries to increase functionality and use operating system (OS)-level functions. These libraries include:

  • The Windows Library for JavaScript – A toolkit of JavaScript libraries that support improved event handling and DOM query behaviors, enable new control types, and provide developer-friendly patterns for other common JavaScript behaviors.
  • Trident – An HTML- and CSS-based model for 2D and 3D graphics.
  • jQuery – Use jQuery 1.7 and later in your app.
  • The Windows Runtime – Common APIs available to JavaScript by using the Windows Runtime infrastructure.

However, in most cases, your original web app will use functionality constrained to the browser, and because the WWAHost.exe provides an Internet Explorer-based rendering platform, direct ports are easily accomplished if your app uses HTML, CSS, and JavaScript technologies exclusively.

A Windows Store app using JavaScript runs in a protected space called a "local context." This means that it does not have web access, broad internet access, or functionality beyond the scope of the app and its component pages. For more information on local contexts, read Features and restrictions by context.

Some web client technologies are not supported or have limited support. The following table identifies many of those technologies.

Technology Description
Adobe Flash Player components WWAHost.exe cannot host Adobe Flash Player objects. If a Flash component is essential to your web app, you must port the Flash object to HTML/CSS and JavaScript. HTML5 and the Windows Runtime provide some of the lower-level OS and user interface (UI) functionality you need to accomplish this.
Microsoft Silverlight components WWAHost.exe cannot host Silverlight objects. If a Silverlight component is essential to operation of your web app, you must port the Silverlight object to HTML/CSS and JavaScript. HTML5 and the Windows Runtime provide much of the lower-level OS and UI functionality you need to accomplish this. Consider porting your Silverlight web component to a Windows Store app using C++, C#, or Visual Basic, which uses XAML in a capacity very similar to Silverlight.
ActiveX controls Most ActiveX Controls are not supported by WWAHost. The following controls are the exceptions.
  • {EAB16C5D-EED1-4E95-868B-0FBA1B42C092} Microsoft RDP Client Control
  • {CD70A734-B6DB-4588-9813-FF2E37A4661F} MSTSC Workspace AX Control
  • {186DD02C-2DEC-41B5-A7D4-B59056FADE51} PortableDeviceAutomation.Factory

If an ActiveX control component is essential to operation of your web app, you must port the ActiveX object to HTML/CSS and JavaScript (or use Windows Runtime Components – see Walkthrough: Creating a basic Windows Runtime component in C++ and calling it from JavaScript or C#). The Windows Runtime provides much of the lower-level OS and graphics functionality you need to accomplish this.
Java objects WWAHost.exe cannot host Java objects. If a Java component is essential to operation of your web app, you must port the Java object to HTML/CSS and JavaScript. The Windows Runtime provides much of the lower-level OS and UI functionality you need to accomplish this.
Other embedded components WWAHost.exe does not support embedded components that are not specified in the HTML5 schema.

 

Porting a web app by using Microsoft Visual Studio 2013

You can port an app by using Microsoft Visual Studio 2013. Before porting, make sure that you have all the HTML/CSS documents and multimedia assets (graphics, sound files, and other binary content) accessible and in a structured layout on your local machine. After you assemble all these components, start Visual Studio 2013.

First, open a new JavaScript project by selecting New from the File menu, and then choose Windows Store style > Blank Application.

Next, add your existing HTML files to the project by using Solution Explorer. Add any CSS or JavaScript files to the "css" and "js" project folders, respectively.

You can now build and debug the port of your web app to a Windows Store app using JavaScript. It will run within WWAHost.exe.

Windows Store apps with JavaScript versus traditional web apps