Condividi tramite

Running Cordova Apps on Windows and Windows Phone 8.1 using Ionic, AngularJS, and other Frameworks

  • Articolo

I just posted a version of the Ionic SideMenu Starter template for Cordova that is available on github. This version of the template is a project built with Visual Studio Tools for Apache Cordova. After struggling through a couple of issues to get everything working right, I thought I'd write a short post to help others who are trying to get started with Cordova when using some third party frameworks, mainly for Windows and Windows Phone 8.1 targets.

The fixes described here may or may not apply to other third party frameworks (besides Ionic, AngularJS, and WinJS), but they are probably a good place to start if you are running into issues.

The issues I've seen involve the following:

  • App fails to load correctly or CSS is not applied
  • Failure of partial pages to load in multi-page apps
  • Expired certificate error

I expect some of these issues to be resolved shortly (e.g., the certificate issue), but community samples in particular are not likely to include these fixes soon.

Update the Shim

When you target Windows and Windows Phone 8.1 from a Cordova app, you may need to use the JavaScript Dynamic Content shim to enable support for some third party libraries, like Ionic, as a workaround for code that Windows flags as unsafe. In fact, the shim is included in the sample apps and the Blank App template. However, you will need to get an updated version of the shim and copy the code into winstore-jscompat.js, or your app may not work correctly. In the Ionic sample I tested, the older version of the shim was dynamically emitting <head> and <a> elements that prevented Ionic CSS from being applied. (In addition, this issue prevents the current AngularJS ToDoList sample app from working on Windows 8.1**.)

**Note: If you want to target Windows Phone 8.1 (recommended) using the ToDoList samples to get started, you will need to update the app as a CTP3 project.

Fix URL Prefixes (multi-page AngularJS apps)

Also, when you are using the AngularJS routing module (Ionic starter templates often use this module as well), you may need to include a call to aHrefSanitizationWhitelist. Typically, you include this in app.js or wherever you are calling your module configuration code:

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);

    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|x-wmapp0):|data:image\//);

If you don't include this code, your links may be flagged as unsafe by AngularJS, and partial pages may not load (On Windows, you may see a prompt asking whether to look for an app on the Store). For one example of using this code, see the Ionic SideMenu Starter template.

Update your Windows Certificate

If you start with the Blank App Cordova template in Visual Studio (or a community sample), you will also run into a Cordova bug caused by an expired certificate for Windows and Windows Phone 8.1. This bug is documented here and the fix is to include the provided temporary certificate either in /res/native/windows (Visual Studio 2015) or in /res/cert/windows8 (Visual Studio 2013 Update 4).

WinJS Compatibility Bug

Lastly, if you are using WinJS and some third party libraries like jQuery, you may run into this navigation issue. The fix has been checked into WinJS, but at present you will need to build your own version of WinJS to get the updated versions of ui.min.js and base.min.js.

Hopefully, these tips will help you get up and running!

Comments

  • Anonymous
    March 01, 2015
    Hey Mike, I have an app up and running in android and windows 8.1. When I reference the adaljs library (adal.js and adal-angular.js) which i've downloaded locally into the project the windows 8.1 app crashes upon loading (doesn't get to the page, just splashcreen and then crashes) but everything works fine in android. I have the URL prefixes in the project and no errors in Android. What could be the issue? Thanks.

  • Anonymous
    March 02, 2015
    Looks like the ADAL library was not designed for use in Cordova, so this could be difficult to debug. Do you have a simple repro?

  • Anonymous
    April 10, 2015
    www.cloudidentity.com/.../adal-plugin-for-apache-cordova-deep-dive