Developing Windows 10 Mobile Apps with Apache Cordova

Created: 01/04/2016 by Roberto De Simone
Updated: 05/15/2017

[This blog has been updated for the cordova-windows@5.0 platform.]

The Cordova Windows Platform

The Cordova Windows platform was introduced after the release of Windows Phone 8.1 and it is as far as I know widely maintained by Microsoft. It is developed with JavaScript accessing the Windows Runtime.

Since Cordova Windows version 4, support for the Windows 10 Universal Windows Platform (UWP) was added. This allows building Windows apps which can run responsively on the various devices supporting Windows 10 (this post focuses only on Windows 10 Mobile). Windows 10 Mobile has a new WebView which uses Edge. This changes everything!

Adding Windows 10 support into a Cordova project

Adding basic Windows 10 support is quite simple and happens by adding some lines into config.xml. These settings determine also what kind of UWP apps shall be supported. The example below supports only Windows 10 Mobile apps. The Cordova Windows 10 Cordova Windows 10 documentation describes further settings and features. Additionally the MSDN documentation can be consulted.

<preference name="windows-phone-target-version" value="10.0" />
<preference name="Windows.Mobile" value="10.0.10240.0" />
<preference name="Windows.Mobile-MaxVersionTested" value="10.0.14393.1066" />

Benefits of the new WebView for Windows 10 Mobile

With the new Edge WebView, the performance of JavaScript increases drastically. Things that can be done for Android and iOS can now be done also for Windows 10 Mobile. The disturbing viewport problem has disappeared. It is no longer necessary to inject a font size into the html tag and to style with em. The WebView still bounces, but this can be solved with CSS rules. The inner bouncing is available now. Unfortunately DOM updates are still significantly slower compared to UIWebView or Chrome. But Microsoft seems to work on this.

Splash Screen is working nicely now

Since cordova-windows@5.0 the splash screen plugin works quite nicely. The flickering and moving of the splash screen due to the software navigation bar has stopped.

Still it is to mention that the splash screen has to be built differently compared to Android and iOS: Basically it is only possible to add something like an icon on a transparent background.

Missing Plugins

Compared to Android and iOS, a lot of plugins are missing for the Windows platform. The plugins developed by the community mostly support only Android and iOS. At this point, also some critic has to be addressed to Microsoft. If they want developers to build Cordova apps, they should take the plugin ecosystem more seriously. Windows support should be added to the most popular plugins. There is only a small community contributing to the Windows platform at the moment. It is the job of Microsoft to close the gap to Android and iOS.

Building Plugins for the Cordova Windows platform is simple

Talking about plugins, the plugin development for the Cordova Windows platform is quite simple, compared to Android and iOS. Windows plugins can be created with JavaScript (also with C#). For Android and iOS, Java and Objective-C/Swift knowledge is needed. Additionally it is not even necessary to build plugins when native functionality is needed. Windows Runtime APIs can be accessed directly in the JavaScript code.

How should a Windows Phone 10 App look like

Beside the limited WebView capabilities, it was also a problem to build Cordova apps that had the look and feel of a native Windows Phone 8.1 app. The navigation bar looked and worked differently compared to an Android or iOS app.

the dialer app in Windows Phone 8.1

The dialer app in Windows Phone 8.1 with the old navigation bar - the navigation bar has big section titles and the navigation happens through sideway sliding. At the bottom the toolbar.

With Windows 10 Mobile the UI of the apps changes - yet, the final direction is not fully clear. Now a Windows 10 Mobile app is somehow similar to an Android or iOS app. These are great news for cross platform app developers, because existing Android/iOS apps or UI frameworks can be adapted in a simpler way to the look and feel of Windows 10 Mobile.

the dialer app in Windows 10 Mobile

The dialer app in Windows 10 Mobile with a navigation bar that is similar to Android and iOS. In fact it looks like an Android tab bar. Still there is a toolbar at the bottom. To learn more about the UI of Windows 10 UWP apps, the extensive style guides can be consulted.

UI JavaScript frameworks to support Windows 10

Of my knowledge, there doesn’t exist a JavaScript framework which really supports the look and feel of Windows Mobile at the moment. Even the WinJS (the Windows Library for JavaScript) project seems to die silently. C# seems to be the first class citizen for native UWP development.

Ionic added basic Windows 10 Mobile support, but the widgets don’t really adapt to the Windows platform yet. As a consequence, Windows 10 Mobile apps will look like Android or iOS apps on Windows 10 Mobile. Apps that have an UI which does not follow the platform guidelines (they adapt to the corporate identity) will look the same on Windows Phone.

In my opinion, Microsoft has to be called again for action. They should contribute somehow to the popular UI frameworks to make sure that these frameworks adapt the UI to the Windows platform when running on it.

Conclusion

Independently of the future of Windows 10 Mobile, it is now possible to build nice apps with the Cordova Windows platform. Microsoft has to make sure that the shortcomings of the Windows platform will be fixed, and popular UI frameworks like Ionic will support properly the look and feel of Windows apps.

As a result Cordova apps will support nearly “costless” Windows 10 Mobile. This might also be the reason why Microsoft is contributing to the Cordova project - a simple way to get more apps for the Microsoft platform.