A PhoneGap+Cordova WP7 Retrospective

The end of an era?

A little over 2 years ago, we announced the arrival of a new PhoneGap target platform; Windows Phone 7. PhoneGap blog post MSDN Blog Post

As of today, we are deprecating Windows Phone 7 as a target platform for Apache Cordova, and therefore PhoneGap as well.  A lot has changed in the last 2 years, with both Windows Phone 8, and Windows 8 coming along, and also getting consumed as Apache Cordova target platforms along the way, it is time for the changing of the guard.  While still available, Windows Phone 7  device use is on the decline.  The low cost Nokia 520 has done a great job, offering an affordable entry into Windows Phone 8 land.  We have seen less and less demand for WP7 features and PhoneGap Build has locked down support for WP7 at version 2.9.0. Here are some interesting stats on worldwide use of Windows Phone devices and versions.

The road to here

In the last 2 years, the Windows Phone 7  UI, then called Metro, has taken over Windows land and is now everywhere from the xbone to the desktop.

The Mango release for Windows Phone 7 brought Internet Explorer 9 to the phone. Up until Mango, hybrid apps were extremely limited by the fact that the WebBrowser control was IE7 under the hood, and did not support any of the standards that we had come to expect in a predominantly WebKit based device browser landscape.

Along the way, there were obstacles, and in many cases, solutions:

Isolated Storage Wars

The way that Windows Phone 7 packages assets as .dll resources means that html/js/css files are not navigable unless they are unpacked to the local file system. This meant that all WP7 PhoneGap apps had to have an additional initialize step to unpack everything. Also, since the dll does not list it's packaged resources, there was an additional build step to run against the project and create a list of everything that needed to be unpacked at runtime.

Untouchable

Touch events, and even mouse events were not supported in WP7. I implemented a workaround which converted native touch events to mouse events which were injected into the browser control and accessible to PhoneGap apps. More info here: Adding Touch Support to WP7

Web-Storage

IE9 supported the Web-Storage API out of the gate, however there were issues with pages loaded from the file:// protocol, because they did not have a domain that IE9 used to sandbox pages. More details here: Implementing WebStorage for PhoneGap

The future, and beyond

I am proud to say that most of the above hybrid app issues that we had to work around in Windows Phone 7, were addressed in Windows Phone 8, and Microsoft has taken great strides in supporting hybrid app development with WinJS for building Windows Store Apps and many more browser improvements in IE10 ( webbrowser control in Windows Phone 8, and Windows 8 ) and IE11 ( webbrowser control in Windows 8.1 and presumably the next version of Windows Phone ).  This is the power of working closely with Microsoft who have done a great job in supporting PhoneGap, and Apache Cordova.  This also fits the original goal of PhoneGap; to 'cease to exist', because the features you need are built into the platform.

Officially we will continue to support developing for Windows Phone 7 until version 3.7.0, which is expected to happen in May 2014.  Greater attention will be given to Windows Phone 8, and Windows 8, so if you were waiting for a reason to update to the new shiny features, it has arrived.

 

[update: fixed typo: mouse events were not supported in WP7 -jm]

 

 

 

 

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.

10,000 Beta Users - Windows Phone Dev Center

The Windows Phone Developer Center has a great distribution channel. I haven't heard much mention of it elsewhere, so I thought I would make a quick post to share some info about it.

Android lets you do whatever you want, and install apps from anyone, from anywhere. Apple allows you to distribute your app to up to 100 devices, as long as they are all part of the provisioned device list, which means you need to be aware of all devices before you build. Microsoft has taken a middle of the road approach.

Microsoft's approach allows you to specify a list of users's email addresses, and those users will see your app in the App store just as if it was public. Just today I noticed that the beta distribution channel supports up to 10,000 users, ( I believe it was only 100 last time I looked. ) This could allow for some very vast betas! Another benefit of this approach is that you can actually test your marketplace presence. You can actually see what your app will look like in the store, and decide if you need more screen-shots, better screen-shots, more description, and so on. Although it may be a hassle to manage 10,000 email addresses in the web page's input box, I still think this is a great approach to beta distribution in that there is no need to rebuild or re-upload, and users can be added and removed ad-hoc. Is anyone using this approach to test their apps with a large scale beta groups? Would you like to invite me to try your app? ( purplecabbage[at]hotmail.com )