FlowFuse / FlowFuse/node-red-dashboard
Material Design Icons Not Loaded from Cache but Fetched from Server Every Time
- Dominant language
- HTML
- Stars
- 355
- Forks
- 82
- Avg merge
- 4d 23h
- Merged PRs (30d)
- 24
Description
### Current Behavior
#### Issue:
Dashboard is fetching icons every time it's reloaded resulting in a delay until icons appear as shown below. This is even more noticeable in poor network conditions.
#### Additional Info:
The service worker precaches all resources, including the Material Design webfont icon file named `materialdesignicons-webfont-xxxx-xxx.woff2`. However, in the compiled `index-xxxxxxxx.css` file, the URL to this file has `?v=7.4.47` appended to it, presumably for cache invalidation. This appended string is also present in the MDI libraries. Unsure as to why it’s essential to invalidate the cache in this scenario.
### "Cold Start" Without Using Cache:
https://github.com/FlowFuse/node-red-dashboard/assets/160297365/51552eb0-fbb0-4dc9-a24c-dcf547492d84
As can be seen the UI widget state has already been received before icons have finished downloading.
### Expected Behavior
Expected behavior should be as seen below.
### "Cold Start" Using Cache:
https://github.com/FlowFuse/node-red-dashboard/assets/160297365/0208e980-2c85-411a-a43f-745efd7917bc
The enforced cache use above was accomplished with a work-around by removing the appended version string from the web font URL in compiled `index-xxxxxxxx.css` file using the following script:
```javascript
const fs = require('fs')
const path = require('path')
const distFolder = path.join(__dirname, 'dist/assets')
fs.readdirSync(distFolder).forEach((file) => {
if (file.endsWith('.css')) {
const filePath = path.join(distFolder, file)
let cssContent = fs.readFileSync(filePath, 'utf8')
cssContent = cssContent.replace(/(woff|eot|woff2|ttf)\?v=\d+\.\d+\.\d+/g, '$1') // Replace the query parameter with any version number only if it's preceded by 'woff', 'eot', 'woff2', 'ttf'
fs.writeFileSync(filePath, cssContent, 'utf8')
console.log(`Updated ${file}`)
}
})
console.log('MDI cache invalidation successfully removed from CSS file!')
```
I added an npm script that's then appended to `build` so it executes post-build to streamline the process: `"replace-mdi-version": "node replace-mdi-version.js"`
#### Are there any _official_ or more elegant ways to accomplish this?
### Steps To Reproduce
_No response_
### Environment
- Dashboard version: 1.9.1
- Node-RED version: 3.1.9
- Node.js version: -
- npm version: -
- Platform/OS: Any
- Browser: Any
### Have you provided an initial effort estimate for this issue?
I am not a FlowFuse team member
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.