I'm reading an (otherwise fascinating) article now on Ionic and came across this snippet of code:

<script type="text/javascript" src="//code.angularjs.org/1.4.3/angular.js"></script>
<script type="text/javascript" src="//code.angularjs.org/1.4.3/angular-resource.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/index.js"></script>

What's wrong with the above code? (And yes, the title mostly gives it away.)

By using a CDN for libraries in your hybrid mobile app, you've essentially ensured the application will be completely broken when offline. This is obvious, but like most of us doing client-side work, we've become accustomed to using CDNs for libraries.

Now - you may ask - what if the core functionality of the application requires you to be online? In that scenario, you still want to ensure you gracefully handle the user being offline. If your CDN libraries fail to load, most likely your application is going to crap the bed. If those libraries were stored locally within the application, you can at least still load up, detect the offline state, and then tell the user they can't do anything while offline.

Even better, you can add a simple event listener for when they get back online and then start the application up again. (And of course, you'll have an event listener for when they go back offline. Because that happens. A lot.)

For an example of this in action, see my earlier blog posts: PhoneGap Online/Offline Tip and PhoneGap Online/Offline Tip (2).