How make browser update script file when manifest updates but allow caching?

Question

I have tried two different ways and both do not work:

1. Update the manifest so browser sees there's changes and updates

This updates all files except JavaScript files. The browser sees there's a difference, downloads everything (including JavaScript files) but uses the cached version of the JavaScript files.

2. Send no-cache headers (see code below) to stop caching of script files

This causes the browser to throw an error and no longer cache anything. It says an ApplicationCache error occurred.

The no-cache code:

<filesMatch "\.(js)$">
    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>

The above makes all browsers not cache the app for offline use.

Is there a way around this?

Answer 1

I don't have sufficient perspective to say whether or not this is a best practice, but whenever our team makes Javascript changes, we increment a query string variable at the end of the path.

<script type="text/javascript" src="/path/to/script.js?v=10"></script>  

Note the v=10 at the end of the src attribute. This implies to the browser that a different file is being retrieved, and therefore, circumvents the cache.

I picked up this method by following existing practice of co-workers.