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)
from React PWA App, Blank page after rebuild and deploy. File hashes changed
No comments:
Post a Comment