404 errors on CSS and JS after deployments
klinker24 opened this issue · comments
After making a deployment, the browser or desktop apps will show a blank screen the first time the user re-opens the app. The cause of the blank screen is missing JS and CSS files from the cache
(I fixed the trailing comma on the manifest.json)
It appears as though the index.html is out of date, the referenced JS and CSS files are the older version, from before the deployment.
The screenshot shows these as the files that the app needs:
app.1faab76.....js
app.6c44b0e....css
After refreshing the page, the correct CSS and JS files are:
app.74b178638d8020261c88.js
app.cba12fa23fb8ddcd41e46bcaf0b1019d.css
Obviously the names change on each build/deployment of the app, that isn't the issue. The issue here is that the new index.html is not being pulled in, while the old JS/CSS files have been removed from the CDN.
I'm sure that this has something to do with the PWA support through the service worker, I am just not sure yet, how to go about fixing it
https://github.com/klinker-apps/messenger-web/blob/master/build/webpack.base.conf.js#L77
Refreshing the page does update everything correctly, as expected. To be honest, I am not quite clear why I set up the service worker in the way that I did. More time will need to be spent looking into the configuration.