Search code examples
javascripthtmlapachecachingstatic-site

How do I avoid caching of a job-generated file in a static site?

My project is a mostly static site generated with Jekyll.
Most of the pages are just informational (hence static), but people can register with their address, so there's a registration page written in PHP.

My question is about a page with a Google Map, with a marker for each of these addresses.

I'm using this approach, I just made a few minor changes, like separating the data (the list of GPS coordinates) into a separate JavaScript file, so I basically have something like this:

data.js:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

map.html:

<!DOCTYPE html>
<html>
  <head>
    <title>address map</title>
  </head>
  <body>
    <div id="map" style="height: 500px; width: 100%;"></div>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=xxxxxxxxxxxx"></script>

    <!-- this should never be cached! -->
    <script src="http://example.com/data.js"></script>

    <script type="text/javascript">
        /* a lot of JavaScript to show the map with markers */
    </script>
  </body>
</html>

map.html is static and (almost) never changes.
data.js (containing the addresses of all existing registrations) is re-generated by a cronjob once per day.

How do I make sure that everyone is always seeing the newest version of data.js all the time?

I read about Cache busting, but I think I can't use it.
As long as map.html is a static file, I can't use either of the two cache busting approaches shown in the link.
(because each time I regenerate the .js file, I'd have to change the link in the HTML file)

Of course I could re-generate the HTML file as well, but I'd like to avoid the complexity if there's another solution.

Do I need cache busting at all, when I know the file will always change in a fixed interval?

The site is hosted on rented LAMP webspace, so I could tell Apache to NEVER cache the .js file.
But this will cause all clients to always re-load it, even though it only changes once each day.

So I could just set the caching time to 24 hours? (because the file is re-generated once per day)
Is it really that simple?

Solution

  • Tried this? Should work in both .htaccess, httpd.conf and in a VirtualHost (usually placed in httpd-vhosts.conf if you have included it from your httpd.conf)

    <filesMatch "\.(html|htm|js|css)$">
  FileETag None
  <ifModule mod_headers.c>
     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"
  </ifModule>
</filesMatch>

    Source: How to prevent http file caching in Apache httpd (MAMP)