Building Windows Store Apps in HTML5 for Your Surface RT

My, what an interesting autumn it has been. Windows 8 has shipped, the Windows Phone 8 SDK has been made available to the public, Windows Phone 8 devices are just a few days away, and Surface RT – the new tablet from Microsoft – has landed in the hands of users world-wide. There has never been a more exciting time to be a software developer, and there have never been more options for building apps for the Microsoft stack than there are right now. And, oh yes, the new RC jet I’ve been working on for the past two years – a 1/6th-scale model of a Northrop Grumman F-5 fighter in the Patrouille Suisse paint scheme – is ready for its maiden flight. But that’s a topic for another day.

Much of my work for the past year has been focused on learning everything there is to know about writing Windows Store apps – the euphemism now used to describe what used to be known as Metro-style apps. I spent several months this year writing the Contoso Cookbook labs published on MSDN and coauthoring Wintellect’s Windows 8 programming course with Jeffrey Richter. I’ve also continued to work heavily with HTML5, both as a mechanism for building rich cross-browser applications and for building cross-platform mobile apps.

Which brings me to the reason for this blog post. I love my Surface RT. I love writing apps for it. Native apps rock, and native Windows Store apps can be written in HTML5 and JavaScript, XAML and C#, or XAML, DirectX, and C++. But how would you go about building a Windows Store app in pure HTML5 – one that doesn’t rely on WinJS, but instead one whose UI and logic are coded in HTML5 and JavaScript in such a way that the same UI and logic would work just as well on iOS, Android, and other operating systems? It’s easier than you might think, thanks to the fact that Windows 8’s WebView control, which uses the same core JavaScript and rendering engines as IE10, is just as capable of using local HTML resources as it is of using resources downloaded over HTTP.

To demonstrate, I took a puzzle app that uses HTML5’s canvas API, jQuery animations, and a local image resource (the same image shown above) and packaged it as a Windows Store app. All UI and logic are completely portable, but they’re wrapped in a native Windows Store app that could easily pass certification and be offered through the Windows Store.

The first step was to use Visual Studio 2012 to create a new “Blank App” Windows Store project. Then I used the Add Existing Item command to import three files into the project’s Assets folder:

• F-5.jpg, which measures 600 x 450 and serves as the puzzle image
• Puzzle.html, which is an HTML5 page that loads the puzzle image and uses the canvas API to cut it into 150 x 150 pixel squares
• jquery-1.6.2.min.js, which contains the minified version of jQuery 1.6.2 and is loaded from Puzzle.html

Next, I opened MainPage.xaml and added a statement declaring a WebView control to the Grid declared by Visual Studio:

<Page
    x:Class="Html5Demo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Html5Demo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <WebView Width="600" Height="400" Source="ms-appx-web:///Assets/Puzzle.html" />
    </Grid>
</Page>

Finally, I pressed F5 to run the app. Here’s how it looked in the Windows Simulator after I clicked  a few puzzle pieces to scramble the image:

Couldn’t be simpler! The key is the ms-appx-web:/// prefix used to initialize the WebView’s Source property. That prefix tells the control to look for Puzzle.html as an in-package resource and to treat it as a Web resource. Also key is that all the URIs in Puzzle.html – the URI referring to F-5.jpg, for example, and the URI in the <script> element that loads jquery-1.6.2.min.js – are relative URIs. When they are resolved, they, too, refer to assets in the Assets folder.

The net result is a Windows Store app that runs great on your Surface RT or on your desktop, and that is easily ported to other operating systems by wrapping the HTML5 assets in packages native to those platforms. Download the source  code and try it yourself.