0

Problem

Given a single page app, I need to always fetch latest values from template html files so that any change will be immediately reflected while navigating (not refreshing) throughout the app.

The problem is I need to not rely on hitting F5 or refresh on the browser to retrieve the changes.

Question

How do I force the SPA to not cache the html templates in my application and always fetch latest template html files when rendering the html page?

HTML - Single Page Application Snippet

   <!DOCTYPE html>
    <html lang="en" manifest="demo.appcache">
      <head>
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />

demo.appcache

CACHE MANIFEST
NETWORK:
*

Note:

I am using gulp cachebust to prevent caching of js/css. Now all I need is to force the html templates to not cache.

Gulp file snippet (cachebust code)

var cachebust = require('gulp-cache-bust');

gulp.src('./index.html')
    .pipe(cachebust({
        type: 'timestamp'
    }))
    .pipe(gulp.dest('.'));
Vahe
  • 1,699
  • 3
  • 25
  • 76
  • Angular itself, not just the browser, caches the template. I wouldn't use your technique. Instead, I would send a header indicating the latest version of the app in each HTTP response, and if it is different from the one bundled in the app, then I would tell the user to refresh (or refresh automatically). – JB Nizet Dec 30 '16 at 20:02
  • Following the answer from http://stackoverflow.com/a/31539776/1691103 resolved my issue. I inserted the code (From the top comment link - answer #2 in the link) into my app.js along with my existing code provided in my question above and was able to get angular to not cache the templates. – Vahe Dec 30 '16 at 20:44

0 Answers0