Ionic framework on a Windows Phone

I recently built a Hybrid app for Android and iOS with the Ionic framework. Without too much trouble I used the native resources of the device like GPS, contact list and share options successfully. The look and feel of the app is the same on every device without having to write a lot of custom CSS styling.

When building cross-platform web apps it’s nice that you can rely on a front-end framework that does the hard work for you. But if you have a framework that also includes an easy and ‘Superheroic’ JavaScript MVW Framework like AngularJS we’re talking about Ionic!

What is Ionic?

Ionic is a front-end framework for building hybrid mobile apps with HTML5. Currently Ionic is in beta development and supports Android and iOS. Windows Phone is not supported yet! But when I read that some people made ionic work on Windows Phone I thought how hard can it be?

Windows Phone and Ionic

If you want to build a hybrid app that also runs on Windows Phone then Ionic is not the best option for the moment. Ionic is still in beta version and doesn’t support Windows Phone for now but they are working on it!

Of course I’ve tested the beloved ionic framework on Windows Phone. My conclusion is that you can use it for small apps if you tweak the Windows Phone project a little bit.

ms-appx IE problem

When you use ng-href and dynamic url’s in your app on Windows Phone, for example:

<a ng-href="#/view/"> click here </a>

You will notice that when you click on the url, you get a message “Search for app in appstore?”. You receive this message because AngularJS can’t handle the prefix that Windows Phone IE is adding. You can resolve this easily by adding an HTML5 shim to your app.

.config([
 '$compileProvider',
 function ($compileProvider)
 $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
 // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
 }
])

Scroll problem

Another problem on Windows Phone is that you can scroll your entire app horizontal and vertical. To resolve this issue you just have to change two things.

The first thing you have to do to resolve this issue is to disable the cordovaView bouncy scrolling. To disable this we have to change settings in the Windows Phone project. Now open your folder where your root project is located and go to the platforms folder. There you’ll find the WP8 folder. In the WP8 folder open the MainPage.xaml.cs file and change the constructor.

// Constructor
public MainPage() {
 InitializeComponent();
 this.CordovaView.Loaded += CordovaView_Loaded;
 //Add this to disable the entire app scrolling
 this.CordovaView.DisableBouncyScrolling = true;
}

The next option you have to change is the shell:SystemTray.IsVisible. If the tray is enabled, the height of your app is not properly calculated. The view will be out of range and vertical scrolling will be enabled.

To disable this open the MainPage.xaml file located in the WP8 folder and set the shell:SystemTray.IsVisible option to False.

Tracing the app

If you want to trace your web app and see the errors or console.log messages, you have to redirect them to the Visual Studio output. We are able to do this by adding the following code to the index file.

<script type="text/javascript">
 window.console = {
 log: function (str) { window.external.Notify(str); }
 };

 // output errors to console log
 window.onerror = function (e) {
 console.log("window.onerror ::" + JSON.stringify(e));
 };

 console.log("Installed console !");
</script>

Sometimes you need to inspect your app to see what happens under the hood. We can use a remote web inspector called weinre. For windows phone there’s a good tutorial on Nokia’s website.

Windows phone IE font problem

In Windows Phone IE icon fonts such as Ionicons or Font Awesome need to load their font files, but it’s not possible to use ``@font-face` with locally stored font files. There are two solutions available for this issue.

The first solution is to add a remote font file and load it in your css. In some cases it’s not practical, for example when you have a hybrid app that doesn’t need network access.

Luckily there’s another solution to solve this problem. You can include your font files with a base64 URL.

@font-face {
 font-family: 'Ionicons';
 src: url(data:application/x-font-woff;charset=utf-8;base64,***) format('woff'),
 url(data:application/x-font-ttf;charset=utf-8;base64,***) format('truetype');
 font-weight: normal;
 font-style: normal;
}

Note: in the example above you should replace the *** with a 64 base url. A good base64encoder can be found here.

ion-list on Windows Phone

If you tested the starter tab example app from the ionic team on your Windows Phone, you may have noticed some strange behaviour when you click on an ion-list item. Go back to the list and click on the same item again. You’ll notice that the view doesn’t change but when you click on an other item the view does change.

When I asked the ionic team about this issue they said “You’ll just have to wait” because they currently don’t support Windows Phone. But they promised to do this as soon as possible!

Conclusion

I love Ionic framework. If you want to develop hybrid apps for iOS and Android you should really consider using it. It comes with a lot of built-in features like lists, pop-ups, gestures and keyboard support. It also uses the AngularJS framework as engine so you can easily create beautiful dynamic apps.

When you decide to develop an app for Windows Phone, you’ll have to keep in mind that Ionic doesn’t support all WP features (yet). But if you use it to create a small application that doesn’t use a lot of ionic-features, it’s a good solution.

Keep up the good work ionic team, we love it!