I have an Web site written by ASP.NET . JS and CSS files are cached by client browsers default. Is there a way, I want to browser cache js and css first, but I want to browser download and cache if newer js and css files. It may be possible , Control date modified.
I make change into head tag like ‘myscript.js?v=300’ , at this time browser load js everytime. I want to browser load js only once if files are newer.
Caching is based on cache related HTTP header response from your server. You need a bundler like this, webpack or browsify. Why you say not in practice while most bundler can generate different filename on every build. That is because browser maintain cache based on filename and the HTTP header, leaving only this two options for you to invalidate the cache. Try hard reload during your development.
Related
I have a ReactJS app hosted in S3 and using Cloudflare as DNS & CDN.
I have a huge issue, a lot of visitors have old version of the application stored in their browser cache (index.html only). I have configured advanced cache control in the newest version, but it cannot be accessed because older version is shown instead.
Static file (CSS, JS) versioning is done using create-react-app, but I have discovered that index.html file is the only cached one.
What should I do now?
How to purge visitors cache now?
PS: I have purged Cloudflare cache already and setup rule to bypass cache.
Unfortunately there is no such solution for this.
The only way is to wait until users cache will empty (expire).
It is technicaly impossible to clear users cache from external resource (JS script etc.), due to security reasons.
Also if it will be possible, there is no way how to tell users to download latest JS (including cache purging code), because they have old version of index.html (including link to those .js files).
You are stack and the only option is to wait.
A better approach would be, whenever your build changes, change the JS link so that the browser downloads the new version from the server, no matter the user's or the server's caching policy.
For example, the way Stack Exchange does it is, whenever the build changes, the HTML goes from something like:
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=1bac371ac78f"></script>
to
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=f83b2f654"></script>
Whenever there's a new build, you can randomize the parameter in the query string in the HTML, and still only have the single (most recent) built .js on your server.
I have a custom JS file with many functions in my MVC4 asp.net application. I marked the JS file as Content and selected Copy Always option in the properties. However, I can only view latest changes to that file if I clear the cache by pressing CTRL + F5. I was wondering if there is any other way to clear the browser cache automatically when I deploy the application to the server.
The server cannot instruct the browser to clear the cache for items that are already cached, because the cache prevents the browser from even asking the server about it. Even if you could, there may be other caches in between the server and the client.
One thing you can do is fool the browser into thinking that your new JS file is a different file by appending some value to the end of the URL, e.g.
<SCRIPT SRC="https://Domain.com/Scripts/MyScriptName.js?version=XXX">
Just increment XXX with each build and the browser will see the JS file as new and ignore any cache of previous versions.
Bundling can help by versioning the delivered js content. Read about it here.
I had problem that i added custom java script its included but when i changes its contents it doesn't effect. it runs older java script file. since i cleared cache. i deleted every folder of /var/ also. but still it runs older java script code. while i see it in uploaded file also it shows updated code but using URL of that java script in browser it shows old code.
I flushed magento cache storage. flushed cache of css/javascript also.
In case if any guy have solution let me know.
Thanks in advance.
EDITED
Same problem with css also. Changes doen't reflect. cleared cache a lot of times from back-end as well as cleared var folder also.
Your server probably have header information asking browsers to cache static files like JS/CSS. It is likely that your browser is still caching the old CSS files. One way to check if it is indeed the browser and not say accidentally editing the wrong CSS file is by enabling and disabling (only go one way to check) the CSS file merge. By doing so you are forcing the browser to fetch for a whole new file - essentially bypassing caching.
You may also want to take a look at our CSS/JS Versioning extension which includes automatic refresh of the file name hash based on CSS/JS file timestamps (sensitive to editing and changes) http://extensions.activo.com/css-and-javascript-versioning.html
Have you cleared your local browser cache on your workstation?
Often, CSS and JavaScript can stick mightily and no matter now much you flush Magento caching on the server, the workstation browser never requests and downloads the new script. These are static files, a change in file date doesn't trigger browser reload, only complete removal from the browser cache does.
Usually CTL-F5 about three times will do it, otherwise you have to go into the web browser setups and flush browser cache there.
Also, if you're using JavaScript/CSS Merge, you need to click the button on the Cache Management page to Flush JavaScript/CSS Cache as well.
The only other place things can gum up is if you're running APC cache, you may need to flush it as well so the block caching for the head can refresh. This only matters if you changed the script and CSS file names, which you probably haven't, so it likely doesn't matter.
I would like user's browser to cache external .css and .js files. However, each time I made changes, I would want user's browser to be able to load the updated external files instead of using the previous cache.
I found out that by adding parameter when including ext .css and .js files will help. But when I did this, I found out that browser no longer cached the files but kept on loading the external files each time I visited the page. May I know how I can solve this?
Basically you have 2 options:
Use Etag. If you hosting provider allows it you could configure Etag in a .htaccess file:
<Directory /path/to/directory>
FileETag INode MTime Size
</Directory>
Not an parameter, add the version as a part of the filename. E.g.: style_10.css
To understand caching I recommend Mark Nottingham's caching tutorial: http://www.mnot.net/cache_docs/.
If you set the proper "Expires" headers the files will be cached even if you add dynamic URL parameters. For that is indeed the most efficient way to handle your problem.
Most web servers will use the files' modified dates to report whether files have changed to the browser. And browsers should correctly ask for files with an If-Modified header so that cached copies will be used.
Are you sure the browser isn't already doing the right thing?
We have multiple pages on a website which require many of the same Javascript and CSS files.
How do we avoid those files being downloaded again if it has already been downloaded by the user browsing some other page?
If the file is in the same path, the browser should automatically cache it. You may want to explicitly specify the cache expiry time, if possible via your web server or programming environment.
If you use an HTTP traffic analyzer like Fiddler you should see that requests for JavaScript and CSS resources return an HTTP code 304 (Not Modified). This tells the browser "the version of the resource you have in your cache is the same as the one on the server so you don't need to download it again".
For even better performance you can explicitly set caching headers for these resources.
This caching tutorial has great info.
You should explicitly set caching headers if you want caching. www.fiddler2.com/redir/?id=httpperf