CDN fallback issue

Question

I was confused whether to use cdn or not , so i went through these links link1 and link2

And they told to use local scripts as a fallback from cdn

So i kept this code

    <script src="https://secure.skypeassets.com/i/scom/js/skype-uri.js" async></script>
    <script>
    window.Skype || document.write('<script src="javascripts/skype-uri.js" async>\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
    window.angular || document.write('<script src="javascripts/angular.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script>
    window['angular-animate'] || document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script>
    window['angular-aria'] || document.write('<script src="javascripts/angular-aria.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
    <script>
    window['angular-material'] || document.write('<script src="javascripts/angular-material.min.js">\x3C/script>')
    </script>

The issue is it gets local files and gets same file from cdn too.

When i hit the page and monitor through charles proxy (or any other network monitoring tool)

Kinda weird but am not able to figure out the issue here.

I don't see how it could possibly work with the stylesheet link, as there's nothing in CSS that would create the `angular-material` global variable. — pawel, Feb 15 '16 at 14:01
stylesheet doesn't create property in window object the same way the scripts do — charlietfl, Feb 15 '16 at 14:01
oh ya , my bad , vl remove that , but what about scripts , there are like 4 more scripts — Aishwat Singh, Feb 15 '16 at 14:11
skype-uri.js , angular.min.js, angular-animate.min.js, angular-aria.min.js, angular-material.min.js — Aishwat Singh, Feb 15 '16 at 14:12

score 2 · Accepted Answer · edited May 23 '17 at 12:23

The fallback for script using window.angular || /* fallback code*/ looks fine and should work (works for me).

Keep in mind the test doesn't refer to the script name but checks if a known global variable that should be set if the script has been loaded in fact exists. So for other scripts you need to know what global variables they set (if any) or what methods/properties they add to existing objects and check for them.

BTW the async flag on your Skype script will break this kind of test because there's a good chanse the check for Skype will execute before the browser fetches and parses the external script.

As for the stylesheet fallback this works fine (even when the local copy also fails - browsers somehow handle this problem ;)):

<link rel="stylesheet" href="//cdnurl/style.css" onerror="this.href='localcopy.css'" />

Edit: to check for angular modules you can use angular.module('moduleName') in a try-catch block (inspired by this answer):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
try {
  angular.module('ngAnimate')
} catch(e){
  document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
}
</script>

i know its a lot to ask but possible for u to tell var for angular-animate and angular aria and angular-material ? Anyways Thanks @pawel — Aishwat Singh, Feb 15 '16 at 14:26
and i tried getting name for angular-animate but it has line like `(function(window, angular, undefined)` i don't understand , how to get its name — Aishwat Singh, Feb 15 '16 at 14:31

CDN fallback issue

1 Answers1