How to ensure load of external js libs, eg: GoogleMaps js

1

Hi,

I wonder how to manage the load of external js libraries.

Let say your app has a google map feature.
As everyone seems to do, the js file is included in the index.html

<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>

But what happen if, you launch your app offline and try later to use the googlemaps feature online?
It won’t work, right.
How to ensure the external lib is loaded when I call this feature?

Thanks.

2

Simple, include it in your application directly. Why would you even want to include it as external source if there’s a chance app will go offline.

3

In your .run, inside your $ionicPlatform.ready (if you got one, if not you should wrap this in an alternative “ready”):

loadScript = function(){
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=gotBack';
      document.body.appendChild(script);
    };
window.loadScript();

This will callback window.gotBack() when it’s done downloading. You can set a variable as false that will only turn to true if the download completes.

2 Likes
4

Well, then you might be desync with Google, no? What if Google updates the lib, and renames some backend resources?

There is an official doc about loading the lib on demand, but I still wonder if this is the best way to manage.

5

Why would you care?

Last few years Google Maps V3 is a standard. It’s a stable well done project.

Script done today will usually work with code written few years ago. This is because most of that code is backward compatible. Even if Google decide to deprecate some part of that code you will be give one year (usually) to update your code.

Also, Google will never change backend resources and service without giving you enough time to adapt.

Another thing, changes to Google Maps js file are no more different than changes to your code. If they occur, you will just create and deploy a new version of your application.

6

@Gajotres is right, you should not be writing any code that includes the script and provides callbacks etc.

Include the library directly into your app, it will be easier to cache and if you are offline you should be wrapping your “online only” features to protect the user from encountering errors anyways.

As for risks involved in including it as a library, it’s far less riskier than including it as an external file where you don’t have direct control over the resources and what api calls are available etc.

Google like most companies always provide a notice period before issuing breaking changes but still support legacy code giving you time to update your app, which you should be doing anyways.

1 Like
7

Ok thanks,
I’ve never seen or read about directly include the library locally.
I thought it might be violating Google’s Terms of Service.

8

I have the same problem in an app I am developing. I can include google maps locally however I also use Stripe.js for payments (https://js.stripe.com/v2/). Stripe will not allow me to host their script locally.

Any ideas?

Thanks,

9

This is the idea:

  1. Host locally everything you can, this way you’ll prevent data traffic every time application is initialized. Plus your application will also work in the offline mode.
  2. If something requires a remote use, you can’t do much against it. Let it be, just make sure you have a fallback if an application can’t access the internet. For example some kind of warning.

For that you can use require.js.

1 Like
10

Perfect answer!

Even after plenty of Googling around it wasn’t clear to me how to “embed” an offline version of the Google Maps scripts in my app, so now I’m using your script to load the script “on demand”.

So, either within my “run” function (if the network is available when the application starts), or just before I need to display a map.

Works like a charm.

11

Well the offline idea will not work for things like stripe.js. Since stripe.js needs to be loaded off a https server.
I tried loading a payment page via ionicPopup and ionicModal but my external JS doesn’t fire, even if wrapped within window.onload().

Any more ideas.

12

“online only” features ? Where can I find documentation for this feature ?