We can forcibly clear the browser cache through some code

Question

We have a project with an intensive static resource, to speed up page loading, we often used browser caching. Now the problem we are facing is every time we update static css or js content. The user complains about some problems. I understand that the user can clear the cache manually and get the right material. But it may not be that when the update file is coming. It downloads the new version that we use php with wamp.

Answer 1

Firstly, it depends on how long you sent the expires header for the - day? A week? Month?

Regardless of when you set the expires header, you need to wait until this time reaches before the browser even starts communicating with the server for the new version. Thus, you will need to change the URL as others have indicated.

However, there is a good option for you, for the future ...

If you set 'cache-control: "no-cache, must-revalidate"' and a short expiration time, then the browser will check the server every time it wants to re-display the cached object using the request header "If-Modified-Since" for send the last timestamp that your server originally sent with this cached object to the" Last-Modified "response header. If the object is updated with a timestamp sent by the client, the server will send a new object and a new Last-Modified timestamp header . If not, it will only reply with the "304-Not Modified" response header.

Thus, the advantage of re-checking is that you still retain some bandwidth with little risk that the client is showing "obsolete" objects, but the disadvantage is that the client has to wait while your server checks the client. If-Modified-Since header versus the file "Last-Modified" timestamp and, of course, the server must actually check the file system to get this "Last Modified". Thus, all that was saved was the actual bandwidth of the content transfer and the transmission time.

---

Good reading resources :

• http://www.mnot.net/cache_docs/
• http://code.google.com/speed/page-speed/docs/caching.html

Answer 2

The fastest and easiest way to force a user to reload a static resource is to add a query string parameter to it, for example. if your script

 <script type="text/javascript" src="myscript.js"></script> 

Do users need to restart it? Add ?v=2

 <script type="text/javascript" src="myscript.js?v=2"></script> 

Updated?

 <script type="text/javascript" src="myscript.js?v=3"></script> 

and etc.

Answer 3

You can force the user to reload static files by simply renaming them, or what many people do is add a timestamp to the request with the latest updated time, for example:

<img src="logo.png?212312313"/>

Each time this changes, the user reloads the new file. It can be an automatic server side, checking the changed file time or just adding a random line (perhaps a version number?) Manually.

Answer 4

You can use the trick to force the browser to download newer versions of css / js files.

Assuming your file is called "layout.css" (or "common.js"), then the syntax to include the file

 <link rel="stylesheet" href="/layout.css"> 

The smart part is to add a query at the end of the file name, e.g.

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

So, every time you change js / css files, add a request different from the one that was there before (the best way, in my opinion, is to increase the number of versions every time you change something).