CODEWITHSUNDEEP
angularjscaching
CaTourist
CaTourist

Reputation: 733

AngularJS browser cache issues

Good morning, I have a web application in production environement. The users are using it every day, when I publish an update and a user comes back to the web application he views the old version of the web application. He needs to refresh the browser to load the new version. How can I solve this problem? I cannot tell hundreds of users to refresh the page every time I publish an update (3-4 times a week).

Upvotes: 21

Views: 42036

Answers (5)

Prasanth
Prasanth

Reputation: 11

The First step is get the timestamp and pass the timestamp as query Parameter in the URL for .html extensions.

While loading html content every time it will render with different routes since the timestamp is append to the URL.

EXAMPLE:

var date = new Date().getTime().toString();
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
}])
$stateProvider.state('app', {
    abstract: true,
    url: '/app',
    cache: false,
    templateUrl: 'views/app.html'**+'?t='+ date**
  })
.state('app.dashboard', {
    url: '/dashboard',
    cache: false,
    controller: 'DashboardCtrl as showCase',
    templateUrl: 'components/dashboard/dashboard.view.html'**+'?t=' + date** ,
  })

Upvotes: 1

Brent Washburne
Brent Washburne

Reputation: 13158

If you are using HTML5, then you can use the Application Cache. It will automatically check for updates and you can prompt the user to refresh the cache.

Here are some good tutorials on how to use it:

A Beginner's Guide to Using the Application Cache

Using the application cache

Let's take this offline (offline web applications)

Upvotes: 4

Andy Gaskell
Andy Gaskell

Reputation: 31761

The first step would be to understand what's happening server side right now. Understand and configure Cache-Control and Etag. While you can use query string parameters, file fingerprinting is a better technique since proxy servers will be allowed to cache the file.

The idea is that you set your documents that can change (if you have an Angular app this is most likely just your index.html) to no-cache and aggressively cache resources that that document references. When you release a new build, your resources are all renamed and when a request comes in everything works as expected.

I use grunt-rev in my Angular app. Works great.

Upvotes: 2

juco
juco

Reputation: 6342

The classic cache problem. Unless told otherwise (by the webserver) the browser is going to cache assets based on the files name. So when it sees the same script/style/image with the same name it will 304 and serve the cached version. There are several ways around this, you can:

Configure the webserver to tell browsers not to cache the file. This is obviously inefficient as the user will have to download the same file time and time again.

Append a query string parameter to the filename such as my-angular-code.js?x=123, again inefficient.

Fingerprint your assets. This is neatly explained in Rails' Asset Pipeline documentation. There are several ways to achieve this, there are grunt tasks and gulp tasks also available for this. Essentially it is the process of changing the file name only when the contents changes, forcing the browser to consider it a new file.

Upvotes: 13

Manish Kr. Shukla
Manish Kr. Shukla

Reputation: 4477

A simple solution would be to add query strings representing timestamp or session id to your files.

For e.g., in our spring applications, we simply use : 

<script src="js/angular/lib/app.js?r=<%= session.getId()%>"></script>

You can implement the same solution in your server specific implementation too.

Upvotes: 11

Related Questions