Vaadin #Javascript : clear cache for updated JS file - javascript

I have a #JavaScript annotation in my application to load a .js file from the classpath.
Now I've made an update to the file and redeployed (locally), but I always get the old version back. I've tried reloading everything (ctrl+R, ctrl+F5) but that doesn't work and also I wouldn't want the users to have to do that.
A trick I used in the past (without Vaadin) was to append a request parameter with the version (e.g. ?version=1) and update that so that the URL changes. But apparently that isn't allowed for the #JavaScript annotation (Vaadin doesn't even try to load the file).

I have overcome this by utilizing the resourceCacheTime parameter of the Vaadin servlet configuration:
#VaadinServletConfiguration(ui = MyUI.class, resourceCacheTime = 0)
Although it has its limitation as described in my answer to another question here.

This is browser feature to localy cache JS files, nothing to do with Vaadin.
As you figure it out yourself: If you want to make sure users have latest version of JS file, you should rename JS file name to: script_buildNumber.js.

Use the Chrome's incognito feature (and not use it when visiting spicy/unpleasant websites).
Just open your browser in Incognito mode https://support.google.com/chrome/answer/95464?hl=en and the browser will cache nothing.
Other browsers have this feature as well (Opera, IE, Firefox, Safari).

As I noted in my comment on the question on January 12th, renaming the file worked. This seems to be currently the only way, although it's far from ideal.

Related

Chrome doesn't recognize my changes on my javascript file and loads old code?

I have been sitting here for almost an hour here to test the website I'm building. Since I wanted to see the new changes from my code I reloaded, but it was reloading old one. I opened the devetools to hard reload and empy cache hard reload, they both load my old code. I went to incognito mode and it did the same thing. I went to devtools again to disable the cache from the settings and checked the disable cache in the network tab; it still cache my old code. Add-ons to clear the cache didn't work as well. Man, I haven't had this problem before and it only happened last night and it's worst today.
I'm so lost now since chrome doesn't load my new changes from my javascript file. Is there a solution for this?
One solution for this problem is to force reloading the resource in order to avoid the cache. You can get this modifying the url with http get parameters:
Change:
<script src="myscripts.js"></script>
to:
<script src="myscripts.js?newversion"></script>
Where newversion can be any string as it will be ignored. A useful option is to use the date, or version, of your code.
I found this workaround particularly useful when I came across this same problem and wanted to ensure that all clients (not just my own browser!) would run the new version of the code.
I think there's an even better way:
You can use PHP to add the last modification date of your JavaScript file to the URI of that file.
<script src="js/my-script.js?<?php echo filemtime('js/my-script.js'); ?>">
</script>
The browser will receive:
<script src="js/my-script.js?1524155368"></script>
The URI of the file will automatically change if the file is updated.
This way the browser can still cache unchanged files while recognizing changes instantly.
Are you using any type of compilation tools (like gulp or grunt)? It's possible that there is an error in your code, and the tool is not compiling the updated code.
Otherwise, the solution #airos suggested should work. Appending any unique query string to the reference of your JS will always serve a fresh copy on first reload (since the browser will be caching a new URL).

Firefox doesn't affected with JavaScript changes

I updated a JavaScript file then uploaded it to my server. The changes was effective on all browsers except Firefox. Firefox see the old version file which returns an error. I opened the file on the web console and still the same old version of the file. I also tried the clear refresh with no success.
I hope any body can help to fix this problem
Clear your cache. For example, if you're using windows, press CTRL+R or CTRL+F5.
Alternatively, for testing, you can do something like this with PHP:
<script src="js/barfoo.js?v=<?=rand(1,99999);?>"></script>
(...which is, by the way, especially nice if used with favicons!)

set about:config parameter of Firefox

I am using Mozilla Firefox 5.0.
I want change value of "signed.applets.codebase_principal_support" parameter of about:config using JavaScript code.
Is it possible?
No that is not possible. If you can access to the harddrive you may change the prefs.js file.
The file is normally located in windows under %appdata%\Mozilla\Firefox\Profiles\<randompart>.default\prefs.js. There you can add or modify such a line:
user_pref("signed.applets.codebase_principal_support", <<your value>>);
I cannot comment yet, so i wrote this in an answer.
Please do NOT change prefs.js, as the beginning of the file and the official website tell. You can either change user.js, which will override all settings made in about:config on startup of firefox, or use the API (i dont know much about it, look it up yourself) or simulate the access of about:config in the browser.

When accessing site from external network using IE JS/CSS(YUI) based UI is not working correctly

We have ASP.NET application in which we have used the YUI to generated the popup for user interface. Now when I amd testing the locally isntalled site the popups are comming correctctly withoug any error and also getting displayed correctly on all the browwsers (including IE 7/8/9).
However when the site is exposed on the server and i tried to test it from the outside network the YUI popup's are not getting genrated correclty like if some Javascript or CSS are not getting loaded or are cached. Generally Ctr+F5 does the trick to flush local cache and to fix the issue we have added query parameters xyz.css?v=10 trick. But its not working. Now this issue is showing only on the IE(6/7/8/9) and other browsers are working correctly. To check the issue i again logged into the production box and found that popup is appearing correctly on IE also.
Now i am not having clue how it could possibly happen. Does any one has came across anything like this? What could be the cause of the issue and how to fix it ?
Thanks
As far as I know, IE caches GET responses.
The xyz.css?v=10 trick is used when you want it to use cached CSS but only as long as it is the same version. Whenever you change something in the css you need to change the url (ie xyz.css?v=20).
If you want IE to NEVER use the cached css, you need the URL to look different everytime. you can do that by adding some timestamp to the url.
something like:
xyz.css?v=201201180600123
(201201180600123 is a timestamp)

View js files in firefox

Everytime I try to navigate to a JS file on Firefox I get a save-as dialog. I would like to just be able to view the source in the actual browser and not have to download and open the file in another editor.
Is there any way I can force Firefox to view the files?
EDIT here's a snapshot:
In Firefox, You can use the view-source: psuedo protocol.
Enter into the URL address bar:
view-source:http://server/whatever/your/url/is.js
See also:
How can I convince IE to simply display application/json rather than offer to download it?
I would try the excellent Open in Browser add-on, which is worth having as part of your standard Firefox install.
Have you ever been annoyed when you wanted to see a document and the download popup appears which forces you to select an external application to view it?
This extension allows you to open the document directly in browser. You can also change the MIME type of a document being viewed.
This extension is necessary due to a 9 year old bug in Firefox. When given Content-disposition: attachment by the server, Firefox will only offer to open the resource with an external application or to save it to disk. "Open here, now, in this Firefox" should also be an option for MIME-Types it handles, but currently isn't.
I agree with the last comment, from just 8 days ago:
not allowing content types that Firefox can handle (text/plain, image/png,
etc) is to be viewed directly is a clear-out bug. Dancing through hoops like
saving the file to some random place then opening it manually is a ridiculous
workaround.
There are three places that Firefox looks for the MIME type of a .js file. (There is a fourth place for some files, such as .html files.)
The first is in a file in your profile called mimeTypes.rdf; if you have ever clicked on a link to a .js file with an unrecognised MIME type then when you save it Firefox will associate that MIME type with .js files. See Mozilla bug 332690 which describes the equivalent bug for .svg files.
The second possibility is that your registry entry HKEY_CLASSES_ROOT\.js\Content Type may have been set to an incompatible value. If present it should be set to one of the values application/x-javascript, application/javascript or text/javascript.
Only if these locations are not set then Firefox will use its internal default which I believe is application/x-javascript.
There is a nice JSView extension that should help you: https://addons.mozilla.org/en-US/firefox/addon/jsview/
If you view the source of a website in Firefox, you can navigate into the javascript files from there also by just clicking on the link in the src="" property.
(This could potentially be influenced by Firebug that I have installed)
Using the devtools it looks like this Ctrl+Shift+K > Debugger > Sources:

Categories

Resources