Caching files for website

javascript

#1

Is it possible to cache the website files (images, html, css, js) based on your version number?

In more detail: I would like to have a version number in my header of the html files. So when someone visit my website the files will be cached. But when he visit my website again it should check the version numbers to registrate if there are new files (images, css, js, html ect) to download. If so it should do that. If not it can used the old cache files.

Something like this:
-------------------------------
<meta name="version" content="1">

# if version number is higher than client number download new files or else use cache files

<filesMatch "\.(xml|txt|html|js|css|jpg|png)$">
  ExpiresDefault A7200
  Header append Cache-Control "proxy-revalidate"
</filesMatch>

#2

Can’t you just include the version number in the resource URLs?

<link rel="stylesheet" href="css/main.css?version=1">

The browser would (if your server is properly configured) cache that resource. If you changed the version=1 to version=2 then it would download the new file, because the URL changed and the old cache no longer is considered valid.


#3

Hey. You should use Progressive Web Apps and Offline Caching functionality.


#4

There is a much easier way - use a manifest file.

The recommended file extension for manifest files is: “.appcache”

so your hea might look something like this

    <!DOCTYPE HTML>
<html manifest="yourfilename.appcache">
...
</html>

Then your mainfest file would be something like this

CACHE MANIFEST

2017-02-20 v1.0.0

/theme.css
/logo.gif
/index.html
/main.js

FALLBACK:
/html/ /offline.html

Everything in the manifest file is cached - every time you update just increment the version number
e.g. version 2 would be

CACHE MANIFEST

2012-02-21 v2.0.0

/theme.css
/logo.gif
/index.html
/page.html
/main.js

FALLBACK:
/html/ /offline.html