Copy link to clipboard
Copied
I am looking for a way to force user browsers to refresh my webpages when they have been updated. I am looking at the developer.mozilla.org page and there are numerous tools but its hard to tell which would be appropriate. I have relaunched a completely new page and am still making minor changes to complete it. Even when ready, I will be making intermitent updates and if users have the old page in cache, they will see stale data. If the CSS has been updated they may just see a broken page, which looks really amateurish.
Is it possible to insert an update date (maybe in meta tags) which the user's browser can read to determine whether a refresh is needed? I think it would have to be something I insert manually to be sure that CSS changes, as well as HTML changes, trigger a refresh.
Copy link to clipboard
Copied
I'm afraid you cannot force people to do something they refuse to do. Just ask the un-masked, un-vaxed COVID-19 patients who are surging the new outbreaks right now. No matter what you tell them they should do, people do what they want to do.
OPTION 1:
Add a notice to the top of time sensitive pages and hope for the best.
Refresh:
OPTION 2:
If you're willing to compromise on page performance, add Pragma no-cache and expiration date meta tags to your document <head>. And hope the end user's browser doesn't ignore it. BTW Expires is in GMT date & time.
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="dd Mon yy hh:mm:ss">
<meta http-equiv="cache-control" content="no-cache">
Good luck!
Copy link to clipboard
Copied
This article may be of assistance
https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c
This shows that the main document is always retrieved from the server while supporting files will be retrived from the browser cacche.
Copy link to clipboard
Copied
Thanks Ben - The article written in plain English - Very handy 🙂 Good to know critical text will be drawn from server - Critical for some of my pages.
Copy link to clipboard
Copied
Do you have caching expressed in your HTACCESS file?
An example for a site that's updated monthly.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/svg+xml "access 1 year"
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 image/x-icon "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
Copy link to clipboard
Copied
Don't have an HTACCESS file - First I ever heard of one 🙂
Copy link to clipboard
Copied
Don't have an HTACCESS file - First I ever heard of one 🙂
=========
.htaccess is commonly used to configure Apache servers.
Plesk Panel users:
https://www.plesk.com/blog/various/comprehensive-guide-to-htaccess/
c-Panel users:
https://www.hostgator.com/help/article/how-to-edit-your-htaccess-file
Copy link to clipboard
Copied
As it hasn't been asked, is this a site you have built yourself or is this a site that you are building using a CMS like Wordpress? Depending on whether you have access to the code, you may opt for the options below or if you are using a CMS, we could offer recommendations for a plugin that could help with forcing your cache to be updated. For instance if you are using Wordpress, I would recommend WP Rocket.
Copy link to clipboard
Copied
Thanks - Site is DIY
Copy link to clipboard
Copied
Assuming it is an Apache server, something like this in .htaccess file should do the trick, it will stop caching. If you are not sure what a htaccess file is, ask your web host for support...
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
Copy link to clipboard
Copied
I've never come across any solution that works 100%.