0

I'm using Liferay CMS as part of my Uni course in full stack development and, as a final project, I have to use the d3.js library to display some graphs. I'm struggling to clear the browser cache though, and that makes the developing process very tedious and time consuming: I'd like to see my front-end changes right away without having to fiddle with the browser cache, especially because, as I'm working with svg elements, it sometimes gets tricky to line up stuff and so on. Sometimes clearing the cache works, sometimes it doesn't, as well as opening a new private window, but there must be a conclusive and foolproof method to delete all cached elements. Does somebody know how to do that?

mootasa
  • 15
  • 1
  • 7
  • This doesn't clear caches but will solve your updating problem. In the HTML, add an (unused) query string to the html link to linked files and alter it each time you make an update. e.g. for css ``- change the 'a' to 'b' or anything (Don't change the linked file's name, the query string will be ignored). This forces the browser to 'change' the linked file each time the `href` changes. Will work for script and other linked files. – Dave Pritlove Jul 18 '22 at 08:25
  • @DavePritlove genius solution man, works beautifully! Post it as an answer so I'll choose it as best one and it will help others noobs like me :D – mootasa Jul 18 '22 at 08:33
  • 2
    @mootasa you can use a random number in the query string, or even `new Date()` followed by `getTime()`. You can read more about this here: https://stackoverflow.com/q/9692665/5768908 – Gerardo Furtado Jul 18 '22 at 09:01
  • @mootasa thanks, I commented here first as it doesn't specifically address the problem of definitively clearing a browser cache but have now added it as an answer as it may help others. Glad it solved your problem. – Dave Pritlove Jul 18 '22 at 09:20

2 Answers2

2

Liferay has a "Developer Mode" which should bypass quite a lot of caching anyway. In your portal-ext.properties (typically in ${liferay.home}, just add the line

include-and-override=portal-developer.properties

to activate this mode.

It will also skip minifiers and concatenation of all of the different resources that you're loading.

Olaf Kock
  • 46,930
  • 8
  • 59
  • 90
1

This doesn't clear caches but will solve your updating problem.

In the HTML, add an (unused) query string to the html link to linked files and alter it each time you make an update to the file. e.g. for css:

<link rel="stylesheet" href="styles.css?a">

Then, each time you make changes to the file pointed to, change the 'a' to 'b' or anything (Don't change the linked file's name, the query string will be ignored).

This forces the browser to 'change' the linked file each time the href changes and so the altered file gets reloaded.

The method will work for script and other linked files. The query string could be something meaningful such as version numbers - ?v1, but anything will do.

Edit, as noted by @GerardoFurtado, a further discussion of this idea is available here Cache busting via params

Dave Pritlove
  • 2,601
  • 3
  • 15
  • 14