CODEWITHSUNDEEP
javascripthtml
Aishwat Singh
Aishwat Singh

Reputation: 4469

CDN fallback issue

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.

Upvotes: 0

Views: 723

Answers (1)

pawel
pawel

Reputation: 36995

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>

Upvotes: 2

Related Questions