Introduction

In this blog post, I will cover my experiences with the Ionic Framework on Windows Phone 8.1 while using it in a fairly simple AllJoyn chat app sample. I’ll go through the issues I run into and how I solved them.

Ionic is one of the UI framework options for building cross-platform Web apps. During the writing of this post, Ionic doesn’t yet officially support Windows Phone. It has been requested in the forums and it has been mentioned to be in the roadmap. Like others have also concluded, even though the official support is not there, the framework can be made usable with some tweaks.

Scope

This post will focus on the issues I didn’t find explained elsewhere and ones that exist in the Windows Runtime -based environment on Windows Phone 8.1. These findings are also applicable when running the app on desktop Windows 8.0 or 8.1, because they are also based on the same Windows Runtime environment as what you find on Windows Phone 8.1.

It is important to note that if you use Cordova scripts to manage your project (and add platforms), the difference is that the following command creates the newer “universal app platform” which is the one I talk about in this post:

> cordova platform add windows

The other option is the command below that creates a platform based on the Windows Phone 8.0 Silverlight environment:

> cordova platform add wp8

An app built on either platform works on Windows Phone 8.1, but due to the differences in the runtime, your app behavior might differ.

Issues

  • UI was not appearing to the screen:

    Windows Runtime has a more restricted policy for injecting content with JavaScript and to allow frameworks like AngularJS to work without modifying them, some custom code is needed. Perhaps the easiest option is to include the winstore-jscompat.js library that handles the needed modifications. However, after doing this, my app still didn’t work as expected and the result was that almost nothing got visible to the screen. After some debugging rounds, I found out that the root cause was a bug in the mentioned library, which resulted into extra body elements being created to the DOM tree, which resulted into various issues in rendering the app properly. Luckily, found out that this issue was already found by others and there was a fix available that solved my problem. Hopefully the fix gets soon integrated to the master version of the library so that it is enough to include the library as is.

  • Ionic popovers got rendered to wrong position:

    This was due to a difference in what document.body.clientWidth returned on IE 11. You can see how I fixed this from the pull request I made towards the Ionic project.</li>

  • Content was not scrollable:

    The way content zooming works by default on the Windows Runtime -based environment interferes with how content scrolling is implemented in Ionic. I fixed it by adding this to my CSS file:</p> body { -ms-content-zooming: none; }

    This issue is also fixed by a pending pull request that contains some more information.

  • ng-click handlers got called twice:

    Debugging revealed that this issue seems to relate to an incompatibility between the Ionic’s tap implementation and the pointer events implementation in IE 11. This issue is now reported and a comment in the report shows a workaround that you can apply in your app to get rid of the issue. </li>

  • App crashes in virtual keyboard use cases:

    This was because the Ionic project template I used uses by default a platform-specific keyboard plugin that is not available yet for Windows Phone. There is a check for the presence of the “window.cordova.plugins.Keyboard”-object, but due to the way the plugin is implemented, this object is always available – also on Windows. I ended up removing the plugin and the usage of the plugin, but if you need it on other platforms, a better would be to add a Windows-specific condition to the if-statement. So, something like:

-    if(window.cordova && window.cordova.plugins.Keyboard) {
+    if (window.cordova && window.cordova.plugins.Keyboard && !ionic.Platform.isWindowsPhone()) {

Good solution in the future would be to include Windows Phone support to the Ionic keyboard plugin.