Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Automatically clearing browser cache when CSS/ theme is modified.

Chethan Barike
10 years ago Feb 04, 2013 7:28am
Bobby Bissett
10 years ago Mar 04, 2013 7:44pm
Henri Sara
10 years ago Mar 05, 2013 7:20am
Matteo Cedroni
6 years ago Dec 23, 2016 1:37pm

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

Stephan Grenier
4 years ago Apr 30, 2018 5:21am
Andrea Pravato
3 years ago Jul 16, 2019 1:31pm

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.

Last updated on Jul, 26th 2019
Ali Berg
3 years ago Dec 09, 2019 5:52pm