I am developing a webapp and the browser doesn't consistently empty the cache each time I refresh, so sometimes I'm not getting the latest version of my JavaScript file loaded.
I would like to have a console message indicating if I'm using the latest version of the JavaScript file each time I refresh. I'm thinking that displaying the "last modified" time of the JavaScript file will do the job!
Any thoughts? Is there a standard solution to my problem that I've missed?
For production environments, whenever you modify your script file, you can alter your script tags to include a version querystring, so that the browser sees there is a new version and gets a fresh copy from the server:
<script type="text/javascript" src="/scripts/myscript.js?v1"></script>
This is just a simple trick that gives the browser a url it hasn't seen before, forcing it to request the new file. The server ignores the querystring and just returns the script file.
For development environments, press ctrl+f5 to force the browser to fetch a fresh copy from the server.
My standard solution for this kind of a problem (if I do understand your concern correctly), is to check the Net tab on the firebug. Go to the Js sub-tab, and then you will see the list of js files being requested from the server/cached. just check the response header.
look at the other answer here. Always use ctrl + f5 to refresh your browser (if you want fresh copy from the serer).
Related
I have several web resources that are displayed on forms in Microsoft Dynamics. The web resources are html files that include JavaScript/CSS files. When I update the JavaScript files, I am seeing that the latest changes are not getting pulled to end user computers on their next use of the form. I believe this is because the previous version of the web resource has been cached on their machine.
According to this SO question, the solution would be to add a version to the script tag. However, according to the comments on the question, this solution does not work on Chrome and is considered a hack. I have also read here that Dynamics should automatically handle caching when web resources are updated, but does not do so reliably (which is my experience).
How can I force end user computers to get the latest version of my code on their next use of the form when I push out updates?
If you are only changing the files for development (ie. Once they are finished they won't change), then most browsers will allow you to disable the cache. In Chrome, this can be done as long as developer tools are open and you click the "disable cache" button in the network tab.
If they are going to change for the client with each request, then you can generate a random ID to be sent with the file (eg example.com/script.js?182hdh2). To allow this, just put some js in your html file (not in an external script) to import all the other files.
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'm writing an asp.net project. When trying to fix a bug, I updated one of my javascript files and then deployed the new version on my server's IIS 6.0. I can see that the new javascript file has been updated on the physical folder of the website.
However, when verifying the bug from my local machine I found that it's not fixed. After some investigation, I realized that it's because the javascript file received by my browser is not the latest version.
I deleted IE's caches and the problem still exists. Then I tried to download the javascript directly from my website by using the url like:
http://myserver.mydomain.com/mywebsite/scripts/myscript.js
and found out the downloaded javascript file is of the old version.
Then I realized this is probably caused by a cache on the server side. I tried to set the server's IIS: on my site's "Output Caching" option, I unchecked "Enable cache" and "Enable kernel cache"
:
Also I added rules for .js and .css file:
After taking all these actions, I updated my javascript file on the server, restarted IIS and tried to download it from my local machine again.However, the javascript I downloaded is still not the latest version.
So my question is, what shall I do to make sure the the browser can immediately get the latest version of the javascript file on my server's disk? Thanks!
I use the old trick of js and css versioning, for example if I create a new js file I call:
new_1.0.0.js
Then, if for some reason I change, I will change the name manually to:
new_1.0.1.js
Also change all the parts where I Referencing. With this, your browser should always bring you the latest standalone version of the settings you have in the IIS. At least in my different jobs where I used II6 or II7 have applied and it has worked.
I have one html file and one js file.
The html file is refreshed, but the js file never gets reloaded.
I have tried clearing the history and the cache as well as turning the iPad off.
I have also deleted all nine pages in the iPad.
Finally I found a workaround. Renaming the js file solved the problem.
But it is an awkward solution.
Is there a better way?
(I'm using the oldest iPad. Can't find out any version numbers.)
To force a reload of a JavaScript file during development I typically add a query string parameter to the end of the file. Like this:
<script type="text/javascript" src="file.js?v=0.1"></script>
When development is complete for that version I include a version number in the file name.
This can be a good idea during testing even if you're not having problems with an iPad or similar. You want to be confident that people are seeing the latest version of the file and explaining how to empty their browser's cache or forcing them to refresh every page will cause problems and false bug reports.
This is a natural habit of caching. When the file actually changes, the iPad should reload the file.
This is the same as a PC browser, or any other device with caching on.
To overcome this, add a variable to the name of the javascript file, something like myfile.js?id=[ADD TIMESTAMP HERE]
On which you ofcourse add a timestamp with the programming language you use, for example in PHP: time()
I'm not 100% sure I understand your question, however if you are building a website and you don't want user's browsers to cache the javascript file I would recommend adding a build number to the JS file each time you save it and update the html reference to the file +buildnumber.js.
Example:
instead of
<script src="myAwesomeJavscriptFile.js"></script>
make it:
<script src="myAwesomeJavscriptFile.001.js"></script>
Then the next time you change it make it:
<script src="myAwesomeJavscriptFile.002.js"></script>
The other way to do it is to send down specific no-cache headers for each file using your web server (Apache, Nginx, IIS)
Good luck!
With in-page script tags I normally do:
script src="js/all.2011_02_02.js"
That way the browser fetches the latest version when I update the script source url and keeps it in cache.
Well, how can I accomplish that with a bookmarklet which I can´t edit (unless I ask the user to delete/create new)?
sample bookmarklet:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://example.com/js/all.js;})()
Not possible.
But you can do
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://example.com/js/all.js?'+new Date().getTime();})()
if you do not want the script cached at all