Vaadin 8 @Javascript : clear cache for updated JS file

Question

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).

Cordey

Maybe your app is using the @PreserveOnRefresh annotation on the UI object? This might prevent Vaadin from reloading any JS. – Bossism

No, I'm not using @PreserveOnRefresh. Besides, I had restarted the server so that wouldn't have made a difference. I've currently just changed the filename (added _vxxx where xxx is a number) and that works. – Cordey

so you are saying, that even a server restart kept the "old" file? could you do a find for the file in your target-dir? could be, that it's there several times (e.g. once from your ide and once from your build tool). if both are in the classpath only one get picked up. – Threnode

well, at least now that I have renamed the file, there's no file with the old name lying around. Before the rename, I did check the file in the target folder and it had the new contents, but still I was getting the old contents in the browser. – Cordey

Answer 1

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.

Faradize

Answer 2

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.

Passepartout

I don't agree that this has nothing to do with Vaadin: there are ways for web applications to tell the browser e.g. not to cache certain resources. I came up with the answer of renaming the file myself but that's really a hack. At least being able to add a request parameter would prevent me from having to change the actual name of the file in version control. – Cordey

after a restart of the container, the new file is definetly loaded fresh from disc and a CTRL-F5 reload at least in Fx in default config will pull the new file. – Threnode

Answer 3

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).

Cloe

I wouldn't want my users to have to visit my web app in incognito mode to ensure they have the latest javascript files. Vaadin should provide a way to tell the browser not to cache them, or support adding request parameters to the name so files don't have to be physically renamed. – Cordey

Sure, I agree with you, I thought you need it only for development. – Cloe

Answer 4

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.

Cordey

@EyvindAlmqvist this question is from 2015, in the pre-Vaadin Flow era. But when the new file has a different name, it's essentially a different file for the browser and won't be loaded from the cache. If you're talking about a .js file as a frontend resource that is bundled (all frontend resources are bundled together into one big bundle), then maybe the issue is that your bundle is not rebuilt. In any case that is not related to browser cache, which this question is about. – Cordey