CODEWITHSUNDEEP
node.jsangularjs
JSAddict
JSAddict

Reputation: 12427

how to handle browser cache with angularjs and nodejs?

currently i am using angularjs and nodejs

i have some angular templates in my server, when the angular requesting the template, the template will be rendered in browser and it will be cached by the browser, if suppose i am changing the layout of the template and updating the template which is in server, now when the user is redirected to the same template the browser renders the template from the browser cache which is old one.

how to overcome this problem?

NOTE : i don't want to clear my whole browser cache since it will affect my overall website performance.

Upvotes: 3

Views: 4516

Answers (1)

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276306

Practical

On some page you are not caching, you can append ?ver= to the url to "break" the cache. Whenever you change the URL it will cause the browser to reload the resource. Add ?ver= to cached resources and change it when you want a reload.

Interesting but less practical

Creating a single page app, I solved this sort of issue using AppCache. With application cache you can ask the page to reload a resource. From the linked page:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

Note, this only works on new browsers like Chrome, Firefox, Safari, Opera and IE10. I wanted to suggest a new approach.

Upvotes: 2

Related Questions