I have a javascript file which internally calls a function to load an xml file.
$(document).ready(function()
{
urlVal ="web/help.xml";
}
The javaxcript is versioned so that the browser always loads it instead of
caching it
"./js/help_min.js?ver=${verNumber}"
I am facing an issue where browser downloads the latest js file but has cached help.xml included in js file.
is there a way that the browser will always load latest "hepl.xml" rather than caching it.
The proper apporach would be to fix the backend to send headers telling the browser not to cache the data (see i.e. How to control web page caching, across all browsers?). But if you cannot do that, make the request unique each time, i.e.
"./js/help_min.js?ver=${verNumber}&random=${something_random}"
where something_random value of random can be i.e. current time stamp (with millis). That way your request will not match the cache entry enforcing fetch on each request.
PS: you seem to also have design flaw, as by logic using the same ${verNumber} should return the same data, hence caching would be more than welcome to reduce the traffic and speed up loading time.
Related
In my webapp the user has the option to download a file containing some data, which they do by clicking on a button. For small amounts of data the file starts downloading pretty much immediately and that shows in the browser's download area. Which is good.
For large amounts of data it can take the server a substantial amount of time to calculate the data, even before we start downloading. This is not good. I want to indicate that the calculation is in progress. However I don't want to put a "busy" indicator on my UI, because the action does not block the UI - the user should be able to do other things while the file is being prepared.
A good solution from my point of view would be to start the download process before I have finished the calculation. We always know (or can quickly calculate) the first few hundred bytes of the file. Is there a mechanism where I can have the server respond to a download request with those few bytes, thus starting the download and making the file show up in the download area, and provide the rest of the file when I have finished calculating it? I'm aware that it will look like the download is stalled, and that's not a problem.
I can make a pretty good estimate of the file size very quickly. I would prefer not to have to use a third-party package to achieve this, unless it's a very simple one. We are using Angular but happy to code raw JS if needed.
To indicate that the link points to a download on the client, the easiest way is the download attribute on the link. The presence of the attribute tells the browser not to unload the current tab or create a new one; the value of the attribute is the suggested filename.
For the back-end part, after setting the correct response headers, just write the data to the output stream as it becomes available.
You asked for a general solution
1) First, at your HTML/JS you can prevent the UI from being blocked by setting you download target to any other WebPage, the preferred way for doing this is to set the target to an IFRAME:
<!-- your link must target the iframe "downloader-iframe" -->
<a src="../your-file-generator-api/some-args?a=more-args" target="downloader-iframe">Download</a>
<!-- you don't need the file to be shown -->
<iframe id="downloader-iframe" style="display: none"></iframe>
2) Second, at your back-end you'll have to use both Content-Disposition and Content-Length(optional) headers, be careful using the "length" one, if you miss calculate the fileSize it will not be downloaded. If you don't use Content-Length you'll not see the "downloading progress".
3) Third, at you'r back-end you have to make sure that you are writing your bytes directly at your response! that way your Browser and your Web-Server will know that the download is "in progress",
Example for Java:
Using ServletOutputStream to write very large files in a Java servlet without memory issues
Example for C#:
Writing MemoryStream to Response Object
HOW this 3 steps are built will be up to you, frameworks and libraries you are using, for example Dojo & JQuery have great IFRAME manipulation utilities, all thought you can do the coding by yourself, this is a JQuery sample:
Using jQuery and iFrame to Download a File
Also:
Adding a "busy" animation is ok! you just have to make sure that it's not blocking you'r UI, something like this:
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 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.