FlowFuse / FlowFuse/node-red-dashboard

Material Design Icons Not Loaded from Cache but Fetched from Server Every Time

Open
#899 0 comments 0 reactions 0 assignees View on GitHub
needs-triage type:bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.