I have an old version of a JS file cached on users' browsers, with expiration set to 10 years (since then, I have learned how to set expires headers correctly on my web server). I have made updates to the JS file, and I want my users to benefit from them.
Is there any way my web server can force users' browsers to clear the cache for this one file, short of serving a differently named JS file?
In the future, if expires headers are not set correctly (paranoia), can my JS file automatically expire itself and force a reload after, say, a day has passed since it was cached?
EDIT: Ideally I want to solve this problem without changing HTML markup on the page that hosts the script.
In short... no.
You can add something to the end of the source address of the script tag. Browsers will treat this as a different file to the one they have currently cached.
<script src="/js/something.js?version=2"></script>
Not sure about your other options.
In HTML5 you can use Application Cache, that way you can control when the cache should expire
You need to add the path to the manifest
<!DOCTYPE HTML><html manifest="demo.appcache">
In your demo.appcache file you can just place each file that you want to cache
CACHE MANIFEST
# 2013-01-01 v1.0.0
/myjsfile.js
When you want the browser to download a new file you can update the manifest
CACHE MANIFEST
# 2013-02-01 v1.0.1
/myjsfile.js
Just be sure to modify the cache manifest with the publish date or the version (or something else) that way when the browser sees that the manifest has change it will download all files in it.
If the manifest is not change, the browser will not update the local file, even if that file was modify on the server.
For further information please take a look at HTML5 Application Cache
You could add a dummy parameter to your URLs
<script src='oldscriptname.js?foo=bar'></script>
[e: f; b]
The main problem is that if you set up the expiration with a simple "Expires" header, then the browsers that have the file cached won't even bother to contact you for it. Even if there were a way for the script to whack the browser in the head and clear the cache, your old script doesn't do that, so you have no way to get that functionality out to the clients.
You can force to reload an cacheated document with on javascript:
window.location.reload(true);
The true command indicate the browser must to reload the page without cache.
Related
I have custom build JS library (which is swiper.js). Can I check if the browser has its CDN version in the cache before downloading it? Normally it's 130KB but my desired version (contain few fewer functions) is just 70KB so I don't want to add those extra KBs to get it from CDN if the user has not already cached it. Is this possible?
Just for clarity, you decide via your markup(html) as to what file the browser should download. So in the case of checking if there's a previous version of a file that you want to refresh, you can simply add a parameter at the end of the file to make the URL unique such that the browser doesn't use one that's prevously downloaded.
Here's an example link:
swipser.js?version=<version or date saved>
So each time a browser see this, it will not download unless the parameter has changed, or perhaps the user has cleared their cache
I know it's possible to force reload from server using location.reload(true). However, let's say I used that to refresh index.html. If index.html loads a bunch of javascript files, those are still coming from the cache for me. Is there any way to ignore the cache for the duration of a request?
My use case is that I'm doing AB testing on my app, and want to provide a way for users to go back to the old version if something isn't working. But some of the URLs are the same, even though the files between versions are different. It would be nice to be able to handle this in JS rather than having to change every URL on the new version.
There is actually at least 535 different ways to reload a page via javascript, FYI ;).
Have you tried to put document on front? document.location.reload(true);
Try also this other option:
window.location.href = window.location.href;
or
history.go(0);
Sure, both are soft reload, but seems to work in certain situation.
If nothing works, you have to append random data to the url (like timestamp) to force the download from server, bypassing the cache.
If you want to bypass browser taking js files from cache, you need to fetch from server not just files like script.js but rather script.12345.js When you update your file on server, you change file's hash number to let's say script.54321.js And browser understands that the file is different, it must download it again. You can actually use Webpack for this purpose to automate things. In output instead of {filename: bundle.js} you write {filename: bundle.[hash].js}
I have one website which serves listener.js on the main page. I want to update this javascript file with some extra codes. But browsers (especially chrome) has memory and disk cache. Also HTTP cache of course. I tried something about that state. I tried just F5, the file loaded from memory cache. Then I killed chrome and opened the website again, javascript file loaded from the disk cache. So I have 2 questions;
When chrome clears disk cache?
How can I say to my visitors don't use any cache and get the new javascript file from my server?
Update:
Can I do this with no-cache Http header?
Removing temporarily cached file known as cache busting. It is useful because browser doesn't have to download these files again.
If it is causing issues, developers can force browsers to download new files. This is performed by re-naming file but there is a better way
src="js/listener.js" => src="js/listener.js?v=2"
Update:
Or hash like this => ?v=c298c7f8233d which is better than ?v=2 (comment by Tech Guy)
(Credits: 30-seconds)
Chrome doesn't auto clear disk cache unless this option is checked
Privacy settings > Content settings > Keep local data only until you quit browser
In which case, it deletes cache on closing the browser.
You usually prevent a client from saving your files in cache by hashing your filenames in
each build, which is the most common cache-busting technique. That means in every release, you will have a new file name and the old cached file won't matter. For instance
Most build tools like Webpack have cache-busting features that you can turn on.
You don't want to stop the user from caching at all, because caching is immensely useful and prevents repeated downloads. You just want to prevent downloads when you build a new release.
This solution worked for me.
let randomNum = Math.round(Math.random() * 10000);
src = "js/listener.js?" + randomNum;
Every time a random number will be generated and it'll be treated as a new request and won't be cached.
I'm deploying a whole new website redesign onto an existing domain. I will be manually replacing all files with the new files at 12:00AM, but how do I ensure users don't get a cached version of the old website (thereby breaking everything)?
Also, how do I change the sitemap so that the old one on google gets replaced?
There are several ways to bust a cache.
The easiest way is to add an expiration header to files of that type. This can be done in an Apache configuration like so:
<FilesMatch "\.(gif|jpg|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 10 years"
</FilesMatch>
You could also use a new query string value in the URL for each resource.
Another option is an updated version number within the filename that is routed to the update file.
You'll need to wait for Google's web crawler to index the changes. It's not something you'll have control over.
There are couple of ways , you can either use tools like webpack or plugins from gulp , grunt which will add a hash to the generated file name ,
So file name will be like this
someabc.RandomAlphanumeric.js
where RandomAlphanumeric randomly generated hash
If you are not using any build tool you can nema the file like
<script type="text/javascript" src="/folder/js/someFile.js?v1"></script>
Note the use of ? .Usually a time stamp is attached with the file name
If you are redeploying an entire site I doubt you want to add ?v1 to every file. And since your files are already cached I don't think that would be very effective anyway. I would look at the server level for an option. Most hosts have an option to disable or refresh your cache. That is your best bet!
1) I'm confused about the purpose of setting header expiry dates
for caching css and js files (like how it's done in the
Boilerplate .htaccess file).
I thought web browsers automatically cache css and js files.
What's the point of setting header expiry dates?
2) Is there a way to NOT use versioning of css and js files and
still have them automatically update when I upload them to a server.
I tried setting a lower expiry date ("access plus 1 week" and "access
plus 0 seconds") and the browser was still displaying the old cached copy
when I uploaded updated css and js files. I'm not 100% sure I did this
correctly, though.
Thanks :)
1) Some browsers don't cache things that do not have an expiration date.
2) Try appending a get variable to the end of your URL string to new versions of your website to ignore previous versions cache. The idea is to transform your urlstring into something like www.example.com/?v=1 and then when you change that to www.example.com/?v=2 the browser does not recognize this url so it doesn't use any cached files. When a user goes back to www.example.com/?v=2 it will access the cached files for v2 of your website