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!

Related Posts:

  • 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 u… Read More
  • Discovering AngularJS I've recently been pointed towards AngularJS by a mentor. At work, we typically use BackboneJS for our client-side framework needs. Since Backbone is so minimalist, over the past few years we've learned some (sometimes expen… Read More
  • Learning Angular | Using a factory to make an API call I was recently building an Angular app in which I had a search page and a search results page. Obviously, the API call would be made after a user hit the search button on the search page, but the question was whether I shoul… Read More

0 comments:

Post a Comment