Using PhoneGap in Windows Phone 8 Applications

Introduction

PhoneGap supports supports unofficially Windows Phone 8 from the end of October 2012. The new version of Apache Cordova 2.3.0, released on 7th of January 2013 has a full support for Windows Phone 8. This is a great opportunity for developers using HTML / JavaScript / CSS to develop fully functional applications for the Windows Phone 8. You are welcome to go download and get started with the direct link to the RTM or r via the tags page at github.com/phonegap/phonegap/tags

This blog is about how to start with PhoneGap and Windows Phone 8. There are details that developers need to know before to start. In this article you will see some tips about how to start easier with Apache Cordova for WP 8 devices.

Background

In my previous blog: “Using PhoneGap in Windows Store Applications” we talked about how to start with Windows Store apps development for Windows 8 & RT using PhoneGap. Maybe some of you were curious why you need to use PhoneGap for Windows 8 after it has support for WinJS. The advantage of using PhoneGap e when you want an application to be compiled for different platforms (Windows 8 (Windows Store Applications) and various mobile platforms) without changes in your HTML and JavaScript code. If you need to create an application only for Windows Store with JavaScript the native choice will be to use WinJS except the case when you already have experience with PhoneGap for some of the mobile platforms. In all cases PhoneGap support for Windows 8 provides additional opportunities to create portable applications with JavaScript code. All WEB developers who know PhoneGap can easily to create Windows Store applications without additional effort.

With Windows Phone 8 the situation is a completely different one:

• Windows Phone 8 has no WinJS support for now
• Many WEB developers are able to create mobile applications with HTML5, JavaScript and CSS (often using also jQuery Mobile)
• There are many developers who have experience with PhoneGap and can create Windows Phone 8 application without additional effort.

Requirements

Windows Phone 8 brings with it some new requirements.

• Operating System:

  • Windows 8, Windows 8 Pro

• Hardware:

  • 6.5 GB of free hard disk space
  • 4 GB RAM
  • 64-bit (x64) CPU

• Windows Phone 8 Emulator:

  • Windows 8 Pro edition or greater
  • Requires a processor that supports Second Level Address Translation (SLAT)

• SDK + IDE ( Visual Studio )

  • VS Express for Windows Phone ( included in the SDK )
  • Visual Studio Professional, Premium, or Ultimate

What is new in Apache Cordova for Windows Phone 8

• Applications now load faster. Windows Phone 8 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.WP8 apps load faster because they do not need to unpack resources to Isolated Storage. In Windows Phone 7.x 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.

• Internet Explorer 10. Windows Phone 8 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. On WP8 you can access localStorage as a key/value dictionary without using a work-around from Apache Cordova for WP7.

PhoneGap developers could use the advantages if the new platform, described here.

Create a Cordova Windows Phone 8 Application

In Apache Cordova 2.3.0 there are two different types of templates:

The 'Full' template includes a pre-built dll containing all the framework code for Apache Cordova. This template will create a project that is easy to update, as you can simply replace the JavaScript and .dll in your project and rebuild when a new version comes out. The downside of this approach is that because the dll contains ALL of the Cordova API, it requires all available permissions even if the APIs are not called. When you submit an app to the App store, Microsoft will run a static analyzer against your application, and detect that you require all available permissions, and place a disclaimer on you app that is presented to the user when they choose to install your app.

The 'Stand-Alone' template includes ALL the source code for Apache Cordova. This project is easier to fine-tune to use just the features you need, thereby working around the permissions issues of the 'Full' template, however this type of project will be more difficult to update, as you will need to update individual files within your project and manage any dependencies yourself.

You can find both templates ( CordovaWP8App_2_3_0_Full or CordovaWP8App_2_3_0_Standalone) in the lib/windows-phone-8/ folder of the your distribution.

If you copy these templates to \My Documents\Visual Studio 2012\Templates\ProjectTemplates\Language\ folder (language in this case is a C# ) it will be possible to select it from the “New Project” dialog window.

The experiment with pre-built Project Templates

My experience has shown that predefined Cordova Windows Phone 8 templates not working correctly. The project file metadata (.vstemplate) file looks fine but I received errors when you tried to create a project from pre-built project templates

An alternative approach

If you have some issues using the pre-built templates you can build a new Cordova Windows Phone 8 project template/

Open one of the two projects \lib\windows-phone-8\templates\standalone\CordovaSolution.sln or \lib\windows-phone-8\templates\full\CordovaSolution.sln

In this demo will be used \lib\windows-phone-8\templates\standalone\CordovaSolution.sln

From the file menu, select 'Export Template...'

Choose template type 'Project template'

Give the exported template a name and set an icon image and a preview image.

Your exported template is available under \My Documents\Visual Studio 2012\Templates\My Exported Templates\ folder

Copy the zip file containing the template under \My Documents\Visual Studio 2012\Templates\ProjectTemplates\Language\ folder and select File->New Project..

Select your template (WP8 Cordova App Project in this sample).

You will have a completely new Cordova Windows Phone 8 project.

Build the project and run it.

Conclusions

Apache Cordova 2.3.0 now officially supports Windows Phone 8. If you have any issues with pre-built project templates just try to build it again from the template solutions.

Source code of the Windows Phone 8 PhoneGap sample application is available here.

You could download Visual Studio 2012 Windows Phone PhoneGap template from this link.

As always, you can follow me on Twitter @mihailmateev and stay in touch on Facebook, Google+ and LinkedIn!