I faced browser caching issue for my website from last 4-5 days. I had a lot of research to resolve it but my website always loaded from browser cache. It was not loading from server until I refreshed it. If I refreshed URL, it loaded from server with my updated changes. After spending 2-3 days on analyzing this issue, I found the solution for this. I want to share this post by that in future no body will face this type of problem.
image source: techstream.org
What is browser cache?
A cache is a repository for stored data that is used to expedite the
process of retrieving data. There are several types of caches, including web page caches, hardware caches, software caches and memory caches.
Caches are used to speed up a process so that data does not have to be
recomputed or fetched from its original location and, therefore, saves
time. The greater the requests that can be served from the cache, the
quicker system performance becomes.
Internet browsers use caching to store HTML web pages by storing a copy
of visited pages and then using that copy to render when you re-visit
that page. If the date on the page is the same date as the previously
stored copy, then the computer uses the one on your hard drive rather
than re-downloading it from the internet.
credit: pctools.com
How to leverage browser cache?
The correct minimum set of headers that works across the most important browsers:
Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0
Where:
-
Cache-Controlis for HTTP 1.1 -
Pragmais for HTTP 1.0 -
Expiresis for proxies
1. Add .htaccess file on your web host/server.
For most people, the way to enable caching is to add some code to a file called .htaccess on your web host/server.
The .htaccess file controls many important things for your site.
The code below tells browsers what to cache and how long to "remember" it. It should be added to the top of your .htaccess file.
.htaccess (Apache)
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule><FilesMatch "^\.">
Header set Pragma "no-cache"
Header set Cache-Control "no-cache"
</FilesMatch>## EXPIRES CACHING ##
Add this file to your web server in Root directory.
2. Disable browser caching by code.
Java Servlet
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); response.setHeader("Pragma", "no-cache"); response.setDateHeader("Expires", 0);
PHP
header('Cache-Control: no-cache, no-store, must-revalidate'); header('Pragma: no-cache'); header('Expires: 0');
ASP
Response.addHeader "Cache-Control", "no-cache, no-store, must-revalidate" Response.addHeader "Pragma", "no-cache" Response.addHeader "Expires", "0"
ASP.NET
Response.AppendHeader("Cache-Control", "no-cache, no-store, must-revalidate"); Response.AppendHeader("Pragma", "no-cache"); Response.AppendHeader("Expires", "0");
Ruby on Rails
response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' response.headers['Pragma'] = 'no-cache' response.headers['Expires'] = '0'
Python on Flask
resp.headers["Cache-Control"] = "no-cache, no-store, must-revalidate" resp.headers["Pragma"] = "no-cache" resp.headers["Expires"] = "0"
Google Go
responseWriter.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate") responseWriter.Header().Set("Pragma", "no-cache") responseWriter.Header().Set("Expires", "0")
2. Use <meta> tags to turn off caching
For the Web Pages (HTML) add the following
<meta> tags to the page(s) you want
to keep browsers from caching (the code must be in the <head> section of your page,
for example right after <title> tag):<meta http-equiv="cache-control" content="no-cache" /><META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1">
credit : cristian.sulea.net
Note: Only a member of this blog may post a comment.