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('.'));