[BUG] Non-CSS assets are not hot-reloaded (or updated <= 12 hours) correctly #1363
Description
Encountered while looking at #1359 and plotly/dashR#201.
index.py
import dash
import dash_html_components as html
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div(id="transition-div")
if __name__ == '__main__':
app.run_server(debug=True)
/assets/custom.css
#transition-div {
height: 600px;
padding: 10px;
background: url('/assets/base.jpg')
}
Using red.jpg and blue.jpg as files copied to base.jpg
Loading the app with debug=True and switching the base.jpg file (e.g. cp blue.jpg base.jpg) hot reloads but reuses the previous (red) image instead of the new one.
This is caused by the assets folder blueprint at https://github.com/plotly/dash/blob/dev/dash/dash.py#L403 assigning both a cache duration of 12 hours and an eTag. Because unlike css files these files are not loaded with a cache buster (?m=..., https://github.com/plotly/dash/blob/dev/dash/dash.py#L611) the cache policy is applied and the old file loaded (cache-control >> eTag)
This is also observable with debug=False across app reloads and standard page reload.
Expected behavior would be for the images to be correctly updated when modified - on a standard page reload and on hot reloading.
This can be achieved by using the same approach as for the component suites resources (https://github.com/plotly/dash/blob/dev/dash/dash.py#L701), (1) using cache control if-and-only-if a fingerprint is present (also, use the new fingerprint instead of the cache buster anti-pattern), (2) reverting to eTag if no fingerprint is found (e.g. images loaded from css)
The fixed behavior of non-css assets should be tested with a new test as part of this issue.