I have a react application which uses a service worker to register as a PWA.
(NOTE This is NOT running as an installed PWA at present)
After a new build of the application the app shows a blank white page unless you clear the browser cache.
The following error can be found in the console:
Refused to execute script from
‘https://[MYSITE]/static/js/main.5499eb74.js’ because its MIME type
(‘text/html’) is not executable, and strict MIME type checking is
enabled.
Looking at this I can see two things:
First the response for main.5499eb74.js is returning the index page (some lines omitted for brevity):
<!doctype html>
<html lang="en">
<head>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="manifest" href="./manifest.json"/>
<script defer="defer" src="./static/js/main.9f20fe6e.js"></script>
<link href="./static/css/main.3d186e11.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
From this I notice that the HTML contains main.9f20fe6e.js which is different from main.5499eb74.js
On build the file hash has changed (as you would expect), however the service worker is loading and old index document with main.5499eb74.js (first request response, returned from service worker):
...
<script defer="defer" src="./static/js/main.5499eb74.js"></script>
...
The problem is I’m not sure how to go about fixing this. Either the service worker should be loading a cached version of the main.5499eb74.js or it should realise it needs to load the index from the server (or both)
3
Answers
It seems the issue was related to this error / warning in the build log (which I didn't notice as we use CI:
Installing and setting maximumFileSizeToCacheInBytes in craco-workbox has fixed this issue
This behavior is seen because the service worker is caching ‘index.html’ which has references to your earlier build chunks.
Refer to the following SO thread to figure out how to fix it.
How to handle caching of index.html file with service worker?
Try to clean the cache before building your application.
But this link can explain the reason for this anomaly clearly: here