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!
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.
The next option you have to change is the
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.
Note: in the example above you should replace the *** with a 64 base url. A good base64encoder can be found here.
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>
.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 thecordovaView 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;
}
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>
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;
}