Search code examples
javascriptangularjsbrowseroclazyload

Do scripts loaded with ocLazyLoad get cached by the browser?


Sorry if this is a newbish question.

I'm using the ocLazyLoad plugin with AngularJS and UI Router. I am using ocLazyLoad with Ui router to dynamically load/lazy-load in my controllers based on the route that is hit in my webapp.

My question is will these lazy-loaded scripts get cached by the browser? And if they are is there a way to force the browser to download a fresh copy (without turning off caching on my webserver).

The problem I am trying to solve is this, I wish to serve up a new version of my index.html with an MD5 hash to force browsers to reload code every time a new version of the webapp is deployed. So if I load up a new index-1ab34c.html my concern is that the lazy loaded JS files will be the same old cached ones and not the fresh code that is deployed.


Solution

  • This question asked more than 100 times actually by different type of question, angular router has a cache problem, the basic solution for this problem is version.

    Desktop or laptop has a option to hard refresh ctrl + F5 this helps to reload all files from beginning, but devices like mobile or tablet doesn't have this option so you have to use version to handle this problem.

    Try to version all of your requests and files, this helps application to get new files and request by last version.

    example:

    var version = "0.0.1"; //0.0.2 // 0.0.9 // 0.1.0 
    //requests
    $http.get("users?v=" + version).then(...);
    
    //files
    //loading with oclazyload or what you want no deference
    "application/controller.js?v=" + version
    

    Version is global variable because you will change it from one place every publish.