Apache Cordova and Windows Phone 8

Apache Cordova and Windows Phone 8

January 7, 2013 Update: We are live!

Apache Cordova 2.3.0 with full support for Windows Phone 8 is available.

Here’s the quick list of steps to follow to get started:

 

Over the last few months, we have been working to bring Windows Phone 8 (WP8) into Apache Cordova. I originally announced the newly supported device at the Microsoft Build event at the end of October, but it has not made it into an official release until recently. Apache Cordova 2.3.0 will include full support for Windows Phone 8 applications. While it probably will not be officially released until the first week of January, you are welcome to go download and get started with the [Direct Link to Release Candidate 2], or via the tags page at github.com/phonegap/phonegap/tags

The majority of the work for WP8 was done by Sergei Grebnov (Sergey). Sergey made huge contributions to Apache Cordova for Windows Phone 7 (WP7), so he already knew his way around Cordova. He was also joined by his colleague Ruslan Kokorev.
Microsoft was also involved, and they helped by providing advanced access to the SDKs, tools and even pre-release devices for us to test on. Microsoft provided technical guidance and support and we also TAP’ed into the community via their Technology Adoption Program.

Windows Phone 8 brings with it some new requirements. You will need to be running Windows 8 Professional or better in order to build for WP8. You will also need Visual Studio 2012 and the WP8 SDK. The express version of Visual Studio 2012 comes with the SDK, and is all you need to get started. You can even use it to continue building apps for Windows Phone 7.

The new ‘Getting Started’ guide is posted and the documentation has been updated to include Windows Phone 8.

Ben Lobaugh of the Microsoft Open Technologies team has recorded a video explaining, everything you need to get started. Watch it on Channel9

If you are a developer coming from a Mac background, then Olivier Bloch (@obloch) has a great post on How to develop for Windows Phone 8 on your Mac.

What’s New?

WP8 apps load faster because they do not need to unpack resources to Isolated Storage. In WP7 Cordova, when the app launched all of the JavaScript, CSS, and HTML had to be moved to the application’s sandboxed file system to allow linking to work. WP8 has removed this step.

Multiple screen sizes, Scalable Vector Graphics (SVG), ES5, gesture events, and more …

The New Browser

WP8 has a new browser! Internet Explorer 10 is the engine behind the WebBrowser control in Cordova for WP8, and this brings many enhancements.

IE10 has MSPointer events, which while not exactly the same thing as webkit’s ubiquitous touch events, is a major step forward from WP7, where I had to generate native mouse events and pass them through the DOM myself. Now you can do true multi-touch interfaces in HTML5 on WP8.

WP7 had issues with a large grey hit area that was drawn on any interactive DOM element ( LINK )
WP8 and IE10 has resolved this. You can specify for yourself how elements should look when touched via the :active selector, or your own mouse/pointer handling logic.

Windows Phone 8 does not support WebSQL (neither did WP7), however this was a deprecated spec anyway. Microsoft has chosen instead to move forward, and so you can use the much richer indexedDB API.

As with WP7, localStorage is available to you, with the added bonus that WP8 has it built in, so my WP7 workaround is no longer required. I had to patch these on WP7 because although they were technically supported by IE9, when a page was loaded from Isolated Storage (via the file:// protocol) it did not have a domain, and was not accessible because it was considered a security violation. Additionally, this means on WP8 you can access localStorage as a key/value dictionary, and you are not forced into using setItem+getItem.

Numerous updates to the documentation to show that all Cordova APIs are supported by Windows Phone 8 and list any quirks with any of the API calls.

Windows Phone 8 still requires user interaction in order to manipulate Contacts, so while some tests will time-out in an automated test, they do pass if someone is there to press the on-screen button and save the contact.

If you are porting a Cordova app to WP8, there is an extremely useful blog post from the Windows Phone team outlining everything you need to know in the process. Read all about Adapting your Webkit optimized site for Internet Explorer 10

Next Steps

CLI tooling needs to be brought up to date to match the other platforms. Visual Studio is great for development, but if you are coming from Android, or iOS, then you expect the same command line interface to work. This will also page the way for integration with tools, like PhoneGap Build.

Windows Phone 7+8 are both using the same JavaScript file behind the scenes. I would like to explore this further and see if we could get to 1 library that could target either, although as WP8 gains prominence this will become less important.

Permission models are still a bit of a mess because of the way Cordova links to every device API. As we explore more plugin-unification this problem should disappear. Some experimentation is still warranted though.

Your Assignment

Once you have ported your Cordova apps to Windows Phone 8, make sure you let everyone know. PhoneGap has a community page where you can post your progress, and get the attention you deserve.

If you find issues, whether they are in the code, the examples, or the documentation, please post them in the Issue Tracker.

If you want to keep a close eye on things as they develop, you can watch the Apache github mirror, or my github fork.

As always, I welcome your comments and suggestions, both here, and on twitter.

  1. Reader
    Reader12-25-2012

    Not sure if you’ve already received this feedback before.. but it is kinda hard to read the text on your blog. The background color and text combo is making it difficult to read.

  2. shrimpy
    shrimpy12-25-2012

    will be good if there is an tutorial about how to use typescript with phone gap.

  3. David
    David12-27-2012

    Thanks so much Jesse, this is awesome! I have used Cordova successfully with iOS and Android and just started looking into Windows Phone. I got everything set up in Parallels on Mac with 2.2.0, but ran into problems creating the template since Microsoft Visual Studio Express 2012 for Windows Phone does not seem to have an option to Export Template under File (I even tried to see if I could add it under Tools > Customize). Thankfully your link to RC2 above includes a zip file for the template and it worked great. I would still be interested in knowing how to create the template in Visual Studio Express, so if you know how to do it, please let me know. Thanks again for the awesome work and post!

  4. Jesse
    Jesse01-04-2013

    David:
    Sorry but you need the paid version of Visual Studio in order to export a template, this feature has been removed from the express version in VS-2012.
    I will continue to distribute the zipped template until I find a suitable workaround.

  5. Jesse
    Jesse01-04-2013

    Reader: Thanks, I have made some slight adjustments, hopefully it is more readable.

    No Twitter Messages