Saturday, September 19, 2015

External Javascript Resources in Ionic Applications

Fun Fact: If you're using an externally referenced Javascript file in your Ionic browser, it will 404 out due to the default content policy on Android phones. This happened to me recently while I was working on an app that uses the Google Maps API to geocode locations.

Running the app in your browser via `ionic serve` does not reflect the issue - it appears only on actual devices. When I built the app and installed it on my phone, it showed me a very helpful blank screen.

I connected the Chrome debugger to the Ionic webview on my phone, and pretty soon tracked the problem down to the Google Maps API js file erroring out. A quick Google search revealed that the best way to get around this issue is to run `cordova plugin add cordova-plugin-whitelist`. The Whitelist plugin allows you to load third party Javascript files as part of your Ionic app. I'm surprised this isn't officially documented anywhere in the Ionic documentation - it seems like a pretty crucial issue to me!