Proper cache busting for index.html (Apache)

From the Competa IT archive; first published on 22–02–2018 by Bastiaan Dressen.

One way to deploy JavaScript applications is to build a streamlined version using some build tool like Webpack and placing the build, as a static resource, on a webserver.

The build usually has an index.html which is the main entry point and contains references to JavaScript and CSS files.

Very often these referenced files contain hashes in their filename. Reasons for this differ, but mostly this is to distinguish between different builds.

So what is the problem?

Browsers seem to aggressively cache index.html, so a new version on the server is not noticed until the browser’s cache is manually purged.

In some cases users are unable to do this manual purge.

example: index.html points to a couple of files containing hashes in their respective filenames, eg. app-cf7653dd.js

The new file on the server (after deployment) will not be noticed, because the cached version of index.html is still pointing to app-faa65436.js (the app.js file containing old hash)

Ok, so what’s the solution?

Configure apache to not cache index.html. All other files may be cached.

Because new versions of JS and CSS files contain a unique hash which potentially changes with new builds, the change of these filenames enables cache busting out of the box.

Instruction below is what needs to be added to Apache config.

<Directory "PATH_TO_DIRECTORY_OF_INDEX.HTML">
  <Files "index.html">
    FileETag None
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
    </Files>
</Directory>