Load the current javascript & css files (Asset.timestamp)

Need Help
1

Like many other users, I would like to ensure that the up-to-date JavaScript and CSS files are always loaded. Of course, the browser’s caching mechanism should still work.

This already seems to be possible with the configuration Asset.timestamp in the config/app.php, where a timestamp is always appended to the URL of the file.

This works when the URL is generated via the PHP template, but not in JavaScript modules. Here is an example:

$this->Html->script('add.js', ['block' => true, 'type' => 'module']);

This generates the following output:

<script src="/js/add.js?1721308503" type="module"></script>

However, in my add.js, I am importing another module using JavaScript:

import { configLoader } from "/js/configLoader.js";

And this file is fetched from the browser cache if it exists and might not be up-to-date, right?

Can I only solve such problems using a UI framework?

Best regards

Marc

2

You could presumably set a JS variable somewhere and reference that in your add.js when loading the other file?

3

I fixed it this way:

I created a helper for generating a script block like this (as described here: JavaScript modules - JavaScript | MDN):

<script type="importmap">
  {
    "imports": {
      "calendar": "/js/calendar.js?1727089904",
      "dataHandler": "./js/dataHandler?1727088544"
    }
  }
</script>

Now, I can import the modules like this:

import { getData } from "dataHandler";