How to force the browser to reload cached CSS and JavaScript files

Question

I have noticed that some browsers  in particular  Firefox and Opera  are very zealous in using cached copies of  css and  js files  even between browser sessions  This leads to a problem when you update one of these files  but the user s browser keeps on using the cached copy  What is the most elegant way of forcing the user s browser to reload the file when it has changed  Ideally  the solution would not force the browser to reload the file on every visit to the page   I have found John Millikin s and da5id s suggestion to be useful  It turns out there is a term for this  auto-versioning  I have posted a new answer below which is a combination of my original solution and John s suggestion  Another idea that was suggested by SCdF would be to append a bogus query string to the file   Some Python code  to automatically use the timestamp as a bogus query string  was submitted by pi    However  there is some discussion as to whether or not the browser would cache a file with a query string   Remember  we want the browser to cache the file and use it on future visits  We only want it to fetch the file again when it has changed

User · Answer

You can force a  quot session-wide caching quot  if you add the session-id as a spurious parameter of the JavaScript CSS file   lt link rel  quot stylesheet quot  src  quot myStyles css ABCDEF12345sessionID quot    gt   lt script language  quot javascript quot  src  quot myCode js ABCDEF12345sessionID quot  gt  lt  script gt   If you want a version-wide caching  you could add some code to print the file date or similar  If you re using Java you can use a custom-tag to generate the link in an elegant way   lt link rel  quot stylesheet quot  src  quot myStyles css 20080922 1020 quot    gt   lt script language  quot javascript quot  src  quot myCode js 20080922 1120 quot  gt  lt  script gt

User · Answer

Say you have a file available at   styles screen css  You can either append a query parameter with version information onto the URI  e g    styles screen css v 1234  Or you can prepend version information  e g    v 1234 styles screen css  IMHO  the second method is better for CSS files  because they can refer to images using relative URLs which means that if you specify a background-image like so  body       background-image  url  images happy gif       Its URL will effectively be   v 1234 styles images happy gif  This means that if you update the version number used  the server will treat this as a new resource and not use a cached version  If you base your version number on the Subversion  CVS  etc  revision this means that changes to images referenced in CSS files will be noticed  That isn t guaranteed with the first scheme  i e  the URL images happy gif relative to  styles screen css v 1235 is  styles images happy gif which doesn t contain any version information  I have implemented a caching solution using this technique with Java servlets and simply handle requests to  v   with a servlet that delegates to the underlying resource  i e   styles screen css   In development mode I set caching headers that tell the client to always check the freshness of the resource with the server  this typically results in a 304 if you delegate to Tomcat s DefaultServlet and the  css   js  etc  file hasn t changed  while in deployment mode I set headers that say  quot cache forever quot

User · Answer

Another suggestion for ASP NET websites   Set different cache-control max-age values  for different static files   For CSS and JavaScript files  the chances of modifying these files on server is high  so set a minimal cache-control max-age value of 1 or 2 minutes or something that meets your need   For images  set a far date as the cache-control max-age value  say 360 days   By doing so  when we make the first request  all static contents are downloaded to client machine with a 200-OK response   On subsequent requests and after two minutes  we see 304-Not Modified requests on CSS and JavaScript files which avoids us from CSS and JavaScript versioning   Image files will not be requested as they will be used from cached memory till the cache expires   By using the below web config configurations  we can achieve the above described behavior   lt system webServer gt       lt modules runAllManagedModulesForAllRequests  quot true quot   gt       lt staticContent gt           lt clientCache cacheControlMode  quot UseMaxAge quot  cacheControlMaxAge  quot 00 00 01 00 quot   gt       lt  staticContent gt       lt httpProtocol gt           lt customHeaders gt               lt add name  quot ETAG quot  value  quot  quot   gt           lt  customHeaders gt       lt  httpProtocol gt   lt  system webServer gt    lt location path  quot Images quot  gt       lt system webServer gt           lt staticContent gt               lt clientCache cacheControlMode  quot UseMaxAge quot  cacheControlMaxAge  quot 180 00 00 00 quot    gt           lt  staticContent gt       lt  system webServer gt   lt  location gt

User · Answer

A SilverStripe-specific answer worked out from reading  http   api silverstripe org 3 0 source-class-SS Datetime html 98-110  Hopefully this will help someone using a SilverStripe template and trying to force reload a cached image on each page visit   refresh  In my case it is a GIF animation which only plays once and therefore did not replay after it was cached  In my template I simply added    Now Format dmYHis   to the end of the file path to create a unique time stamp and to force the browser to treat it as a new file

User · Answer

If you re using Git and PHP  you can reload the script from the cache each time there is a change in the Git repository  using the following code  exec  git rev-parse --verify HEAD 2 gt   dev null    gitLog   echo     lt script src  quot  path to script js quot  v    gitLog 0    gt  lt  script gt   PHP EOL

User · Answer

Well  I have made it work my way by changing the JavaScript file version each time the page loads by adding a random number to JavaScript file version as follows     Add it to the top of the page  lt  php     srand         random number   rand      gt   Then apply the random number to the JavaScript version as follow   lt script src  quot file js version  lt  php echo  random number   gt  quot  gt  lt  script gt

User · Answer

You could simply add some random number with the CSS and JavaScript URL like example css randomNo   Math random

User · Answer

I ve solved this issue by using ETag   ETag or entity tag is part of HTTP  the protocol for the World Wide Web  It is one of several mechanisms that HTTP provides for Web cache validation  which allows a client to make conditional requests  This allows caches to be more efficient and saves bandwidth  as a Web server does not need to send a full response if the content has not changed  ETags can also be used for optimistic concurrency control 1 as a way to help prevent simultaneous updates of a resource from overwriting each other    I am running a Single-Page Application  written in Vue JS   The output of the application is built by npm  and is stored as dist folder  the important file is  dist static js app my rand js  Nginx is responsible of serving the content in this dist folder  and it generates a new Etag value  which is some kind of a fingerprint  based on the modification time and the content of the dist folder  Thus when the resource changes  a new Etag value is generated  When the browser requests the resource  a comparison between the request headers and the stored Etag  can determine if the two representations of the resource are the same  and could be served from cache or a new response with a new Etag needs to be served

User · Answer

I am not sure why you guys gals are taking so much pain to implement this solution  All you need to do if get the file s modified timestamp and append it as a querystring to the file  In PHP I would do it as   lt link href  quot mycss css v  lt    filemtime  mycss css     gt  quot  rel  quot stylesheet quot  gt   filemtime   is a PHP function that returns the file modified timestamp

User · Answer

We have one solution with some different way for implementation  We use the above solution for it  datatables v 1  We can handle the version of the file  It means that every time that we change our file  change the version of it too  But it s not a suitable way  Another way used a GUID  It wasn t suitable either  because each time it fetches the file and doesn t use from the browser cache  datatables v Guid NewGuid    The last way that is the best way is  When a file change occurs  change the version too  Check the follow code   lt script src  quot   scripts main js v  File GetLastWriteTime Server MapPath  quot  scripts main js quot    ToString  quot yyyyMMddHHmmss quot   quot  gt  lt  script gt   By this way  when you change the file  LastWriteTime change too  so the version of the file will change and in the next when you open the browser  it detects a new file and fetch it

User · Answer

I ve heard this called  quot auto versioning quot   The most common method is to include the static file s modification time somewhere in the URL  and strip it out using rewrite handlers or URL configurations  See also   Automatic asset versioning in Django Automatically Version Your CSS and JavaScript Files

User · Answer

Google Chrome has the Hard Reload as well as the Empty Cache and Hard Reload option  You can click and hold the reload button  in Inspect Mode  to select one

User · Answer

The 30 or so existing answers are great advice for a circa 2008 website   However  when it comes to a modern  single-page application  SPA   it might be time to rethink some fundamental assumptions    specifically the idea that it is desirable for the web server to serve only the single  most recent version of a file  Imagine you re a user that has version M of a SPA loaded into your browser   Your CD pipeline deploys the new version N of the application onto the server You navigate within the SPA  which sends an XMLHttpRequest  XHR  to the server to get  some template    Your browser hasn t refreshed the page  so you re still running version M    The server responds with the contents of  some template     do you want it to return version M or N of the template   If the format of  some template changed between versions M and N  or the file was renamed or whatever  you probably don t want version N of the template sent to the browser that s running the old version M of the parser     Web applications run into this issue when two conditions are met   Resources are requested asynchronously some time after the initial page load The application logic assumes things  that may change in future versions  about resource content  Once your application needs to serve up multiple versions in parallel  solving caching and  quot reloading quot  becomes trivial   Install all site files into versioned directories   v lt release tag 1 gt     files      v lt release tag 2 gt     files    Set HTTP headers to let browsers cache files forever    Or better yet  put everything in a CDN    Update all  lt script gt  and  lt link gt  tags  etc  to point to that file in one of the versioned directories  That last step sounds tricky  as it could require calling a URL builder for every URL in your server-side or client-side code  Or you could just make clever use of the  lt base gt  tag and change the current version in one place      One way around this is to be aggressive about forcing the browser to reload everything when a new version is released  But for the sake of letting any in-progress operations to complete  it may still be easiest to support at least two versions in parallel  v-current and v-previous

User · Answer

In ASP NET Core you could achieve this by adding  asp-append-version    lt link rel  quot stylesheet quot  href  quot   css xxx css quot  asp-append-version  quot true quot    gt     lt script src  quot   js xxx js quot  asp-append-version  quot true quot  gt  lt  script gt   It will generate HTML   lt link rel  quot stylesheet quot  href  quot  css xxx css v rwgRWCjxemznsx7wgNx5PbMO1EictA4Dd0SjiW0S90g quot    gt   The framework will generate a new version number every time you update the file

User · Answer

Thanks to Kip for his perfect solution  I extended it to use it as an Zend view Helper  Because my client run his page on a virtual host I also extended it for that         Extend filepath with timestamp to force browser to    automatically refresh them if they are updated       This is based on Kip s version  but now    also works on virtual hosts     link http   stackoverflow com questions 118884 what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files       Usage     - extend your  htaccess file with      Route for My View Helper AutoRefreshRewriter      which extends files with there timestamp so if these      are updated a automatic refresh should occur      RewriteRule              d     css js    1  2  L     - then use it in your view script like     this- gt headLink  - gt appendStylesheet   this- gt autoRefreshRewriter  this- gt cssPath    default css            class My View Helper AutoRefreshRewriter extends Zend View Helper Abstract        public function autoRefreshRewriter  filePath             if  strpos  filePath           0                    Path has no leading                 return  filePath            elseif  file exists   SERVER  DOCUMENT ROOT      filePath                     File exists under normal path                so build path based on this              mtime   filemtime   SERVER  DOCUMENT ROOT      filePath               return preg replace                    quot   mtime   1 quot    filePath             else                   Fetch directory of index php file  file from all others are included                 and get only the directory              indexFilePath   dirname current get included files                      Check if file exist relativ to index file             if  file exists  indexFilePath    filePath                         Get timestamp based on this relativ path                  mtime   filemtime  indexFilePath    filePath                       Write generated timestamp to path                    but use old path not the relativ one                 return preg replace                    quot   mtime   1 quot    filePath                 else                   return  filePath

User · Answer

I put an MD5 hash of the file s contents in its URL   That way I can set a very long expiration date  and don t have to worry about users having old JS or CSS  I also calculate this once per file at runtime  or on file system changes  so there s nothing funny to do at design time or during the build process  If you re using ASP NET MVC then you can check out the code in my other answer here

User · Answer

For ASP NET I propose the following solution with advanced options  debug release mode  versions   Include JavaScript or CSS files this way   lt script type  quot text javascript quot  src  quot Scripts exampleScript lt   Global JsPostfix  gt  quot    gt   lt link rel  quot stylesheet quot  type  quot text css quot  href  quot Css exampleCss lt   Global CssPostfix  gt  quot    gt   Global JsPostfix and Global CssPostfix are calculated by the following way in Global asax  protected void Application Start object sender  EventArgs e                string jsVersion   ConfigurationManager AppSettings  quot JsVersion quot        bool updateEveryAppStart   Convert ToBoolean ConfigurationManager AppSettings  quot UpdateJsEveryAppStart quot         int buildNumber   System Reflection Assembly GetExecutingAssembly   GetName   Version Revision      JsPostfix    quot  quot    if  DEBUG     JsPostfix     quot  min quot    endif     JsPostfix     quot  js  quot    jsVersion    quot   quot    buildNumber      if  updateEveryAppStart                Random rand   new Random            JsPosfix     quot   quot    rand Next

User · Answer

For a Java Servlet environment  you can look at the Jawr library  The features page explains how it handles caching   Jawr will try its best to force your clients to cache the resources  If a browser asks if a file changed  a 304  not modified  header is sent back with no content  On the other hand  with Jawr you will be 100  sure that new versions of your bundles are downloaded by all clients  Every URL to your resources will include an automatically generated  content-based prefix that changes automatically whenever a resource is updated  Once you deploy a new version  the URL to the bundle will change as well so it will be impossible that a client uses an older  cached version   The library also does JavaScript and CSS minification  but you can turn that off if you don t want it

User · Answer

If you are using a modern browser  you could use a manifest file to inform the browsers which files need to be updated  This requires no headers  no versions in URLs  etc  For more details  see  Using the application cache

User · Answer

Here is my Bash script-based cache busting solution   I assume you have CSS and JavaScript files referenced in your index html file Add a timestamp as a parameter for  js and  css in index html as below  one time only  Create a timestamp txt file with the above timestamp  After any update to  css or  js file  just run the below  sh script  Sample index html entries for  js and  css with a timestamp   lt link rel  quot stylesheet quot  href  quot bla bla css v my timestamp quot  gt   lt script src  quot scripts bla bla js v my timestamp quot  gt  lt  script gt   File timestamp txt should only contain same timestamp  my timestamp   will be searched for and replaced by script later on  Finally here is the script  let s call it cache buster sh  D  old timestamp   cat timestamp txt  current timestamp   date   s  sed -i -e  quot s  old timestamp  current timestamp g quot  index html echo  quot  current timestamp quot   gt timestamp txt   Visual Studio Code users  you can put this script in a hook  so it gets called each time a file is saved in your workspace

User · Answer

Here is a pure JavaScript solution  function            Match this timestamp with the release of your code     var lastVersioning   Date UTC 2014  11  20  2  15  10         var lastCacheDateTime   localStorage getItem  lastCacheDatetime         if lastCacheDateTime           if lastVersioning  gt  lastCacheDateTime               var reload   true                       localStorage setItem  lastCacheDatetime   Date now          if reload           location reload true                 The above will look for the last time the user visited your site   If the last visit was before you released new code  it uses location reload true  to force page refresh from server  I usually have this as the very first script within the  lt head gt  so it s evaluated before any other content loads   If a reload needs to occurs  it s hardly noticeable to the user  I am using local storage to store the last visit timestamp on the browser  but you can add cookies to the mix if you re looking to support older versions of IE

User · Answer

One of the best and quickest approaches I know is to change the name of the folder where you have CSS or JavaScript files  Or for developers  Change the name of your CSS and JavaScript files something like versions   lt link rel  quot stylesheet quot  href  quot cssfolder somecssfile-ver-1 css quot   gt   Do the same for your JavaScript files

User · Answer

Small improvement from existing answers    Using a random number or session id would cause it to reload on each request  Ideally  we may need to change only if some code changes were done in any JavaScript or CSS file  When using a common JSP file as a template to many other JSP and JavaScript files  add the below in a common JSP file  lt    taglib prefix  quot c quot  uri  quot http   java sun com jsp jstl core quot   gt   lt c set var    quot version quot  scope    quot application quot  value    quot 1 0 0 quot    gt   Now use the above variable in all locations as below in your JavaScript file inclusions   lt script src   lt spring url value  quot  js myChangedFile js version   version  quot   gt   gt  lt  script gt   Advantages    This approach will help you in changing version number at one location only      Maintaining a proper version number  usually build release number  will help you to check verify your code changes being deployed properly  from developer console of the browser     Another useful tip  If you are using the Chrome browser  you can disable caching when Dev Tools is open  In Chrome  hit F12   F1 and scroll to Settings   Preferences   Network    Disable caching  while DevTools is open

User · Answer

If you are using jQuery  there is an option called cache that will append a random number  This is not a complete answer I know  but it might save you some time

User · Answer

Just use server-side code to add the date of the file    that way it will be cached and only reloaded when the file changes  In ASP NET   lt link rel  quot stylesheet quot  href  quot   css custom css d   System Text RegularExpressions Regex Replace File GetLastWriteTime Server MapPath  quot   css custom css quot    ToString    quot   0-9  quot    quot  quot    quot    gt    lt script type  quot text javascript quot  src  quot   js custom js d   System Text RegularExpressions Regex Replace File GetLastWriteTime Server MapPath  quot   js custom js quot    ToString    quot   0-9  quot    quot  quot    quot  gt  lt  script gt   This can be simplified to   lt script src  quot  lt    Page ResolveClientUrlUnique  quot   js custom js quot     gt  quot  type  quot text javascript quot  gt  lt  script gt   By adding an extension method to your project to extend Page  public static class Extension Methods       public static string ResolveClientUrlUnique this System Web UI Page oPg  string sRelPath                string sFilePath   oPg Server MapPath sRelPath           string sLastDate   System IO File GetLastWriteTime sFilePath  ToString            string sDateHashed   System Text RegularExpressions Regex Replace sLastDate   quot   0-9  quot    quot  quot             return oPg ResolveClientUrl sRelPath     quot  d  quot    sDateHashed

User · Answer

quot Another idea which was suggested by SCdF would be to append a bogus query string to the file   Some Python code to automatically use the timestamp as a bogus query string was submitted by pi   However  there is some discussion as to whether or not the browser would cache a file with a query string   Remember  we want the browser to cache the file and use it on future visits  We only want it to fetch the file again when it has changed   Since it is not clear what happens with a bogus query string  I am not accepting that answer  quot    lt link rel  quot stylesheet quot  href  quot file css  lt   hash hmac  sha1   session id    md5 file  quot file css quot       gt  quot    gt   Hashing the file means when it has changed  the query string will have changed  If it hasn t  it will remain the same  Each session forces a reload too  Optionally  you can also use rewrites to cause the browser to think it s a new URI

User · Answer

Many answers here advocate adding a timestamp to the URL  Unless you are modifying your production files directly  the file s timestamp is not likely to reflect the time when a file was changed   In most cases this will cause the URL to change more frequently than the file itself   This is why you should use a fast hash of the file s contents such as MD5 as levik and others have suggested  Keep in mind that the value should be calculated once at build or run  rather than each time the file is requested  As an example  here s a simple bash script that reads a list of filenames from standard input and writes a JSON file containing hashes to standard output     bin bash   Create a JSON map from filenames to MD5 hashes   Run as hashes sh  lt  inputfile list  gt  outputfile json  echo  quot   quot  delim  quot  quot  while read l  do     echo  quot  delim  quot  l  quot     quot  md5 -q  l   quot  quot      delim  quot   quot  done echo  quot   quot   This file could then be loaded at server startup and referenced instead of reading the file system

User · Answer

For developers with this problem while developing and testing  Remove caching briefly   quot keep caching consistent with the file quot     it s way too much hassle    Generally speaking  I don t mind loading more - even loading again files which did not change - on most projects - is practically irrelevant  While developing an application - we are mostly loading from disk  on localhost port  - so this increase in network traffic issue is not a deal breaking issue  Most small projects are just playing around - they never end-up in production  So for them you don t need anything more    As such if you use Chrome DevTools  you can follow this disable-caching approach like in the image below   And if you have Firefox caching issues    Do this only in development  You also need a mechanism to force reload for production  since your users will use old cache invalidated modules if you update your application frequently and you don t provide a dedicated cache synchronisation mechanism like the ones described in the answers above  Yes  this information is already in previous answers  but I still needed to do a Google search to find it

User · Answer

My method to do this is simply to have the link element into a server-side include    lt  -- include virtual   includes css-element txt -- gt    where the contents of css-element txt is   lt link rel  stylesheet  href  mycss css   gt    so the day you want to link to my-new-css css or whatever  you just change the include

User · Answer

Changing the filename will work   But that s not usually the simplest solution   An HTTP cache-control header of  no-cache  doesn t always work  as you ve noticed   The HTTP 1 1 spec allows wiggle-room for user-agents to decide whether or not to request a new copy    It s non-intuitive if you just look at the names of the directives   Go read the actual HTTP 1 1 spec for cache    it makes a little more sense in context    In a nutshell  if you want iron-tight cache-control use  Cache-Control  no-cache  no-store  must-revalidate   in your response headers

User · Answer

TomA s answer is right  Using the  quot querystring quot  method will not be cached as quoted by Steve Souders below      that Squid  a popular proxy  doesn   t cache resources with a querystring   TomA s suggestion of using style TIMESTAMP css is good  but MD5 would be much better as only when the contents were genuinely changed  the MD5 changes as well

User · Answer

For development  use a browser setting  for example  Chrome network tab has a disable cache option  For production  append a unique query parameter to the request  for example  q Date now    with a server-side rendering framework or pure JavaScript code     Pure JavaScript unique query parameter generation          myfile js  function hello     console log  hello             end of file   lt script type  quot text javascript quot  gt      document write   lt script type  quot text javascript quot  src  quot myfile js q     Date now       quot  gt         document write is considered bad practice         We can t use hello   yet  lt  script gt      lt script type  quot text javascript quot  gt      hello     lt  script gt

User · Answer

You can use SRI to break the browser cache  You only have to update your index html file with the new SRI hash every time  When the browser loads the HTML and finds out the SRI hash on the HTML page didn t match that of the cached version of the resource  it will reload your resource from your servers  It also comes with a good side effect of bypassing cross-origin read blocking   lt script src  quot https   jessietessie github io google-translate-token-generator google translate token generator js quot  integrity  quot sha384-muTMBCWlaLhgTXLmflAEQVaaGwxYe1DYIf2fGdRkaAQeb4Usma kqRWFWErr2BSi quot  crossorigin  quot anonymous quot  gt  lt  script gt

User · Answer

The simplest method is to take advantage of the PHP file read functionality  Just have the PHP echo the contents of the file into  tags    lt  php   Replace the  style css  with the link to the stylesheet  echo   lt style type  text css  gt   file get contents  style css     lt  style gt      gt    If you re using something besides PHP  there are some variations depending on the language  but almost all languages have a way to print the contents of a file  Put it in the right location  in the  section   and that way  you don t have to rely on the browser

User · Answer

Don   t use foo css version 1  Browsers aren t supposed to cache URLs with GET variables  According to http   www thinkvitamin com features webapps serving-javascript-fast  though Internet  Explorer and Firefox ignore this  Opera and Safari don t  Instead  use foo v1234 css  and use rewrite rules to strip out the version number

User · Answer

Simple Client-side Technique In general  caching is good    So there are a couple of techniques  depending on whether you re fixing the problem for yourself as you develop a website  or whether you re trying to control cache in a production environment  General visitors to your website won t have the same experience that you re having when you re developing the site   Since the average visitor comes to the site less frequently  maybe only a few times each month  unless you re a Google or hi5 Networks   then they are less likely to have your files in cache  and that may be enough  If you want to force a new version into the browser  you can always add a query string to the request  and bump up the version number when you make major changes   lt script src  quot  myJavascript js version 4 quot  gt  lt  script gt   This will ensure that everyone gets the new file   It works because the browser looks at the URL of the file to determine whether it has a copy in cache   If your server isn t set up to do anything with the query string  it will be ignored  but the name will look like a new file to the browser  On the other hand  if you re developing a website  you don t want to change the version number every time you save a change to your development version   That would be tedious  So while you re developing your site  a good trick would be to automatically generate a query string parameter   lt  -- Development version  -- gt   lt script gt document write   lt script src  quot  myJavascript js dev     Math floor Math random     100      quot   gt  lt   script gt     lt  script gt   Adding a query string to the request is a good way to version a resource  but for a simple website this may be unnecessary   And remember  caching is a good thing  It s also worth noting that the browser isn t necessarily stingy about keeping files in cache   Browsers have policies for this sort of thing  and they are usually playing by the rules laid down in the HTTP specification   When a browser makes a request to a server  part of the response is an Expires header    a date which tells the browser how long it should be kept in cache  The next time the browser comes across a request for the same file  it sees that it has a copy in cache and looks to the Expires date to decide whether it should be used  So believe it or not  it s actually your server that is making that browser cache so persistent   You could adjust your server settings and change the Expires headers  but the little technique I ve written above is probably a much simpler way for you to go about it  Since caching is good  you usually want to set that date far into the future  a  quot Far-future Expires Header quot    and use the technique described above to force a change  If you re interested in more information on HTTP or how these requests are made  a good book is  quot High Performance Web Sites quot  by Steve Souders   It s a very good introduction to the subject

User · Answer

Instead of changing the version manually  I would recommend you use an MD5 hash of the actual CSS file   So your URL would be something like  http   mysite com css  md5 hash here  style css   You could still use the rewrite rule to strip out the hash  but the advantage is that now you can set your cache policy to  cache forever   since if the URL is the same  that means that the file is unchanged   You can then write a simple shell script that would compute the hash of the file and update your  tag  you d probably want to move it to a separate file for inclusion    Simply run that script every time CSS changes and you re good  The browser will ONLY reload your files when they are altered  If you make an edit and then undo it  there s no pain in figuring out which version you need to return to in order for your visitors not to re-download

User · Answer

I came to this question when looking for a solution for my SPA  which only has a single index html file listing all the necessary files  While I got some leads that helped me  I could not find a quick-and-easy solution  In the end  I wrote a quick page  including all of the code  necessary to autoversion an HTML JavaScript index html file as part of the publishing process  It works perfectly and only updates new files based on date last modified  You can see my post at Autoversion your SPA index html  There is a stand-alone Windows application there too  The guts of the code is  private void ParseIndex string inFile  string addPath  string outFile        string path   Path GetDirectoryName inFile       HtmlAgilityPack HtmlDocument document   new HtmlAgilityPack HtmlDocument        document Load inFile        foreach  HtmlNode link in document DocumentNode Descendants  quot script quot                  if  link Attributes  quot src quot    null                        resetQueryString path  addPath  link   quot src quot                         foreach  HtmlNode link in document DocumentNode Descendants  quot link quot                  if  link Attributes  quot href quot      null  amp  amp  link Attributes  quot type quot      null                        if  link Attributes  quot type quot   Value     quot text css quot     link Attributes  quot type quot   Value     quot text html quot                                 resetQueryString path  addPath  link   quot href quot                                       document Save outFile       MessageBox Show  quot Your file has been processed  quot    quot Autoversion complete quot       private void resetQueryString string path  string addPath  HtmlNode link  string attrType        string currFileName   link Attributes attrType  Value       string uripath   currFileName      if  currFileName Contains               uripath   currFileName Substring 0  currFileName IndexOf            string baseFile   Path Combine path  uripath       if   File Exists baseFile           baseFile   Path Combine addPath  uripath       if   File Exists baseFile           return      DateTime lastModified   System IO File GetLastWriteTime baseFile       link Attributes attrType  Value   uripath    quot  v  quot    lastModified ToString  quot yyyyMMddhhmm quot

User · Answer

The RewriteRule needs a small update for JavaScript or CSS files that contain a dot notation versioning at the end  E g   json-1 3 js  I added a dot negation class      to the regex  so  number  is ignored  RewriteRule              d     css js    1  2  L

User · Answer

I suggest implementing the following process   version your CSS and JavaScript files whenever you deploy  Something like  screen 1233 css  the number can be your SVN revision if you use a versioning system   minify them to optimize loading times

User · Answer

A simple solution for static files  just for development purposes  that adds a random version number to the script URI  using script tag injections  lt script gt      var script   document createElement  script        script src    quot js app js v  quot    Math random        document getElementsByTagName  head   0  appendChild script    lt  script gt

User · Answer

Google s mod pagespeed plugin for Apache will do auto-versioning for you  It s really slick  It parses HTML on its way out of the webserver  works with PHP  Ruby on Rails  Python  static HTML -- anything  and rewrites links to CSS  JavaScript  image files so they include an id code   It serves up the files at the modified URLs with a very long cache control on them   When the files change  it automatically changes the URLs so the browser has to re-fetch them   It basically just works  without any changes to your code   It ll even minify your code on the way out too

User · Answer

For my development  I find that Chrome has a great solution  https   superuser com a 512833 With developer tools open  simply long click the refresh button and let go once you hover over  quot Empty Cache and Hard Reload quot   This is my best friend  and is a super lightweight way to get what you want

User · Answer

You can just put  foo 1234 at the end of your CSS   JavaScript import  changing 1234 to be whatever you like  Have a look at the Stack  Overflow HTML source for an example  The idea there being that the   parameters are discarded   ignored on the request anyway and you can change that number when you roll out a new version   Note  There is some argument with regard to exactly how this affects caching  I believe the general gist of it is that GET requests  with or without parameters should be cachable  so the above solution should work  However  it is down to both the web server to decide if it wants to adhere to that part of the spec and the browser the user uses  as it can just go right ahead and ask for a fresh version anyway

User · Answer

I see a problem with the approach of using a timestamp- or hash-based differentiator in the resource URL which gets stripped out on request at the server  The page that contains the link to e g  the style sheet might get cached as well  So the cached page might request an older version of the style sheet  but it will be served the latest version  which might or might not work with the requesting page  To fix this  you either have to guard the requesting page with a no-cache header or meta  to make sure it gets refreshed on every load  Or you have to maintain all versions of the style file that you ever deployed on the server  each as an individual file and with their differentiator intact so that the requesting page can get at the version of the style file it was designed for  In the latter case  you basically tie the versions of the HTML page and the style sheet together  which can be done statically and doesn t require any server logic

User · Answer

Another way for JavaScript files would be to use the jQuery   getScript in conjunction with   ajaxSetup option cache  false  Instead of   lt script src  quot scripts app js quot  gt  lt  script gt   You can use    ajaxSetup     cache  false        getScript  scripts app js       GET scripts app js  1391722802668

User · Answer

In Laravel  PHP  we can do it in the following clear and elegant way  using file modification timestamp    lt script src  quot    asset   js your js v   filemtime  js your js       quot  gt  lt  script gt   And similar for CSS  lt link rel  quot stylesheet quot  href  quot   asset  css your css v   filemtime  css your css      quot  gt   Example HTML output  filemtime return time as as a Unix timestamp   lt link rel  quot stylesheet quot  href  quot assets css your css v 1577772366 quot  gt

User · Answer

Simply add this code where you want to do a hard reload  force the browser to reload cached CSS and JavaScript files     window  load function         location reload true        Do this inside the  load  so it does not refresh like a loop

User · Answer

I recently solved this using Python  Here is the code  it should be easy to adopt to other languages   def import tag pattern  name    kw       if name 0      quot   quot           name   name 1         Additional HTML attributes     attrs       join    s  quot  s quot     item for item in kw items         try            Get the files modification time         mtime   os stat os path join   documentroot   name   st mtime         include    quot  s  d quot     name  mtime            This is the same as sprintf pattern  attrs  include  in other           languages         return pattern    attrs  include      except            In case of error return the include without the added query           parameter          return pattern    attrs  name   def script name    kw       return import tag   lt script  s src  quot   s quot  gt  lt  script gt    name    kw   def stylesheet name    kw       return import tag   lt link rel  quot stylesheet quot  type  quot text css quot   s href  quot   s quot  gt    name    kw   This code basically appends the files time-stamp as a query parameter to the URL  The call of the following function script  quot  main css quot    will result in  lt link rel  quot stylesheet quot  type  quot text css quot   href  quot  main css 1221842734 quot  gt   The advantage of course is that you do never have to change your HTML content again  touching the CSS file will automatically trigger a cache invalidation  It works very well and the overhead is not noticeable

User · Answer

For ASP NET 4 5 and greater you can use script bundling   The request http   localhost MvcBM time bundles AllMyScripts v r0sLDicvP58AIXN mc3QdyVvVj5euZNzdsa2N1PKvb81 is for the bundle AllMyScripts and contains a query string pair v r0sLDicvP58AIXN mc3QdyVvVj5euZNzdsa2N1PKvb81  The query string v has a value token that is a unique identifier used for caching  As long as the bundle doesn t change  the ASP NET application will request the AllMyScripts bundle using this token  If any file in the bundle changes  the ASP NET optimization framework will generate a new token  guaranteeing that browser requests for the bundle will get the latest bundle   There are other benefits to bundling  including increased performance on first-time page loads with minification

User · Answer

Disable caching of script js only for local development in pure JavaScript  It injects a random script js wizardry 1231234 and blocks regular script js   lt script type  quot text javascript quot  gt    if document location href indexOf  localhost       -1        const scr   document createElement  script        document setAttribute  type    text javascript        document setAttribute  src    scripts js      wizardry     Math random         document head appendChild scr       document write   lt script type  quot application x-suppress quot  gt        prevent next script from other SO answer       lt  script gt    lt script type  quot text javascript quot  src  quot scripts js quot  gt

User · Answer

I have not found the client-side DOM approach creating the script node  or CSS  element dynamically   lt script gt      var node   document createElement  quot script quot        node type    quot text javascript quot       node src    test js     Math floor Math random   999999999       document getElementsByTagName  quot head quot   0  appendChild node    lt  script gt

User · Answer

This solution is written in PHP  but it should be easily adapted to other languages  The original  htaccess regex can cause problems with files like json-1 3 js  The solution is to only rewrite if there are exactly 10 digits at the end   Because 10 digits covers all timestamps from 9 9 2001 to 11 20 2286   First  we use the following rewrite rule in  htaccess  RewriteEngine on RewriteRule          d  10    css js    1  2  L   Now  we write the following PHP function          Given a file  i e   css base css  replaces it with a string containing the     file s mtime  i e   css base 1221534296 css          param  file  The file to be loaded   Must be an absolute path  i e                    starting with slash       function auto version  file      if strpos  file           0     file exists   SERVER  DOCUMENT ROOT      file       return  file      mtime   filemtime   SERVER  DOCUMENT ROOT      file     return preg replace                    quot   mtime   1 quot    file      Now  wherever you include your CSS  change it from this   lt link rel  quot stylesheet quot  href  quot  css base css quot  type  quot text css quot    gt   To this   lt link rel  quot stylesheet quot  href  quot  lt  php echo auto version   css base css      gt  quot  type  quot text css quot    gt   This way  you never have to modify the link tag again  and the user will always see the latest CSS   The browser will be able to cache the CSS file  but when you make any changes to your CSS the browser will see this as a new URL  so it won t use the cached copy  This can also work with images  favicons  and JavaScript  Basically anything that is not dynamically generated

User · Answer

Interesting post  Having read all the answers here combined with the fact that I have never had any problems with  quot bogus quot  query strings  which I am unsure why everyone is so reluctant to use this  I guess the solution  which removes the need for Apache rewrite rules as in the accepted answer  is to compute a short hash of the CSS file contents  instead of the file datetime  as a bogus querystring  This would result in the following   lt link rel  quot stylesheet quot  href  quot  css base css  hash-here  quot  type  quot text css quot    gt   Of course  the datetime solutions also get the job done in the case of editing a CSS file  but I think it is about the CSS file content and not about the file datetime  so why get these mixed up

User · Answer

It seems all answers here suggest some sort of versioning in the naming scheme  which has its downsides  Browsers should be well aware of what to cache and what not to cache by reading the web server s response  in particular the HTTP headers - for how long is this resource valid  Was this resource updated since I last retrieved it  etc  If things are configured  correctly   just updating the files of your application should  at some point  refresh the browser s caches  You can for example configure your web server to tell the browser to never cache files  which is a bad idea   A more in-depth explanation of how that works is in How Web Caches Work

[javascript] How to force the browser to reload cached CSS and JavaScript files

Examples related to javascript

Examples related to css

Examples related to caching

Examples related to auto-versioning