Angular application side client caching

Question

Problem

We use Angular.js for our front-end application, which is served from an Express server.

Some of our users experience occasional problems with the application, but when they clear their browser cache, the problem is fixed.

We also notice that when we introduce a new version of our application on the Internet, we need to hard update before we can see the new changes.

How can we make sure that when we click the new version of the application, all users see the new updated version?

Technical data

The express code that we use to service the Angular App:

var app = express();

app.use(function(req, res, next) {
    var schema = req.headers["x-forwarded-proto"];

    // --- Do nothing if schema is already https
    if (schema === "https")
        return next();

    // --- Redirect to https
    res.redirect("https://" + req.headers.host + req.url);
});

app.use(function(req, res, next) {
   res.setHeader("Cache-Control", "public, max-age=3600");
   return next();
});

app.use(express.logger('dev'));
app.use(gzippo.staticGzip("" + __dirname + "/dist"));

//prerender is used for SEO
app.use(prerender);
app.use('/', express.static(__dirname + '/'));

//HTML5 mode
app.use(function(request, response, next) {
   response.sendfile(__dirname + '/dist/index.html');
});

app.listen(process.env.PORT || 5000);

, , Cache-Control 1 . , ( Cache-Control).

, Chrome, Cache-Control .

Grunt-rev, , , CSS JS , . ( index.html).

.

Answer 1

, gzippo!

, , Cache-Control, , gzippo , Cache-Control 1 ( doc). "".

,

• , Cache-Control.

• gzippo

  app.use(gzippo.staticGzip("" + __dirname + "/dist", {
    clientMaxAge: 3600 * 1000 // 1 hour, it seems gzippo takes milliseconds, not seconds
  }));
  

:)

gzippo

, , !