Automatically clearing browser cache when CSS/ theme is modified.

General
1

Hi Vaadin,

Im using Vaadin as a portlet in Liferay.

I want to see CSS modification on browser refresh without clearing browser cache manually.

I dont want to do any configuration in browser for not store in its cache. That is I cant tell the user to clear the browser cache to get modified Theme change.

This is for Application Production purpose.

Is there any thing i can play around with javascript / expiry time / modification time of files (css, js, images).

BR,
Chethan

2

The only certain way I know to avoid caching (in browser or other caching layers) is to change the name of the file that’s being retrieved. So you could copy your existing css file into a new file with a different name and reference that one instead from the code. Then, eventually, remove the old file. Seems like a big step though. Can’t you just wait a while until user’s browser’s caches expire?

Just remember: you never control the user’s environment.

Cheers,
Bobby

3

Some browsers (including Chrome) tend to cache CSS more aggressively than what the server tells the browser. A few forced page refreshes in the browser (Ctrl-F5) usually help, but apparently that is not what you want here.

For the file renames Bobby suggested, one trick that might work (I haven’t tried to implement this for themes): use “mythemefile.css?123” where you increment the number every time. From the browser’s point of view, the files are separate even if you serve a modified version of the same file from the server.

I can’t really give many details on how to implement this, though. As starting point, check the private methods AbstractApplicationServlet/VaadinServlet.serveStaticResources() and serveStaticResourcesInVaadin() to see if the server already accepts such URLs or not, and (if I remember correctly) the client side class ApplicationConnection (search for “theme”; somewhat tricky to extend and API may change in future versions).

4

I,
I’ve tried so many solutions…

vaadinBootstrap.js default code, builds css url by this code

var href = url + '/styles.css'; if (version) { href += '?v=' + version; } You can modify this code (by maven/ant process) to append url with additional query param,
but then Vaadin, at the bootstrap phase, intercepts this as theme change and adds original url in the html head.

A working solution for my Dashboard based project, is a modified version of this class

https://github.com/jbjares/vaadin/blob/master/src/main/java/com/vaadin/demo/dashboard/DashboardSessionInitListener.java

The modified version contains

head.append("<script>if (sessionStorage.resRefreshed) { /*resources already refreshed*/ } else{ sessionStorage.resRefreshed=true; window.location.reload(); }</script>"); to force the “reload once” behavior

5

This solution seems to work but the problem is that the screen is reloaded a second time every time you close and restart the browser which looks very odd…

6

Hi! I had the same issue and solved by reloading the css file using javascript:
in my main view class MainUI.java, in the init() method, I have also something like this (whenever the new release involves css changes):
// I am reloading css to overwrite previous cache
JavaScript.getCurrent().execute(
“var randomNum = Math.random();”
+ “var link = document.createElement( "link" );” +
“link.href = "./VAADIN/themes/<…appNameHere…>/styles.css?"+randomNum;” +
“link.type = "text/css";” +
“link.rel = "stylesheet";” +
“link.media = "screen,print";” +
“document.getElementsByTagName( "head" )[0]
.appendChild( link );”);
This tricks the browser into loading again the css file, which will override the previously cached one.
Before of this I have tried to set cache time to zero in vaadin servlet configuration ( @VaadinServletConfiguration(resourceCacheTime = 0,… ), but this did not seem to work fine in chrome. Reloading css with javascript is working.

7

Andrea Pravato:
Hi! I had the same issue and solved by reloading the css file using javascript:
in my main view class MainUI.java, in the init() method, I have also something like this (whenever the new release involves css changes):
// I am reloading css to overwrite previous cache
JavaScript.getCurrent().execute(
“var randomNum = Math.random();”
+ “var link = document.createElement( "link" );” +
“link.href = "./VAADIN/themes/<…appNameHere…>/styles.css?"+randomNum;” +
“link.type = "text/css";” +
“link.rel = "stylesheet";” +
“link.media = "screen,print";” +
“document.getElementsByTagName( "head" )[0]
.appendChild( link );”);
This tricks the browser into loading again the css file, which will override the previously cached one.
Before of this I have tried to set cache time to zero in vaadin servlet configuration ( @VaadinServletConfiguration(resourceCacheTime = 0,… ), but this did not seem to work fine in chrome. Reloading css with javascript is working.

Is Working