-
Notifications
You must be signed in to change notification settings - Fork 804
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
index.html cache issue #2299
Comments
I face the very same issue. My vague guess is that the
|
@claymation296 hm, I'm not sure if this helps, I'm afraid that revision number of index.html in precache-manifest file changes ... because if not, every user will face the issue, but it's not happening now. It happens sometimes (randomly?)... |
Hi, @ketysek I saw your console error and it was exactly the same issue i worked around. The behavior is the same too and the context too. I'm pretty sure that when this happen, your revision hash in your manifest.json is wrong (the previous one ?). @claymation296 you are welcom 😉 |
@ketysek aww sorry it didn't help. Originally the error was caused after updating my Webpack and Workbox packages. I thought this would help you because I too was getting the - Uncaught SyntaxError: Unexpected token '<' - but from a .js file. After I commented out a script tag type="application/ld+json" in my index.html, that error stopped being raised. That's when I realized that app updates weren't taking because index.html wasn't updating, which lead me to this issue. When you say randomly, are you sure that its not from the cache expiring on its own? I ask because that's what it seemed like to me when it first started happening. At first I looking around the internet to make sure I was using the right events from window-workbox. Thought it was a timing issue with sw lifecycle events. But nope, I was wrong about that. I had to really dig into the cache and files with the 'Application', 'Sources' and 'Network' tabs in Chrome Dev Tools to know for sure that the WB_REVISION hash tagged onto the end of the index.html was off. I hope this helps someone out there in the future! |
How your server is setup for the pwa fallback ? Because it can be caused by the mime-type incorrectly setup ... ex your server is returning .html file with .js mime-type ? I was using express in production to serve assets behind a proxy nginx. My express serveur was using express-history-api-fallback.
|
I'm now waiting if some customer will have an issue so I can inspect some stuff... :-) |
OK, it happened also to me now. So I got these records in precache manifest:
following things are in my browser's cache:
So as you can see, I got same index revision in cache as it's in precache manifest, but index.html tries to load following scripts from previous version:
Cmd+shift+R for loading index.html without service worker load correct index.html. Weird is that my colleague did the same updating procedure as me but he has got correct index.html in cache. Why is this happening? He has exact same revision number of index.html in cache also in precache manifest of course. |
The solution is to force webpack to change and update your index.html with your build revision hash in the head meta. read comments |
@blephy what it will solve? The revision number was different than the previous one. Also I'm using create-react-app, can't inject webpack.hash in index.html now. |
Whenever this has some up before, it's been due to one of two things:
|
Hi @jeffposnick, thanks for your reply! Ad your second point first - this is definitely not my problem because max. size of the whole bundle app file is according to console around 800kB, it also doesn't throw any warning in console during build, so I assume everything is OK. now to your first point - I'm not using lazy loading in app, so I can show you my updating procedure while I'm developing it using As you probably know, there's
As you can see, I'm reloading window right after |
I had a similar problem with the If I am not mistaken, the Workbox The code that generates this hash should be in get-string-hash.js and looks like this: // This is how Workbox generate the `revision` for an asset.
const workboxRevisionFromString = (string) => {
const md5 = crypto.createHash('md5');
md5.update(string);
return md5.digest('hex');
}; The content of my
Because of I think that the solution discussed in #1692 would also work in my case. I am not using webpack, but of course I can still generate a hash and inject it in a This is what I thought: since the CSP and all other headers I am setting in my
[*] At first I was concatenating just my CSP and the |
@jackdbd, this has always been one of the more difficult things to explain in our docs, but You provide an object whose keys are the "real" URLs that should be used as a cache key, and whose values are an array of one or more So in your case, you might have: const generateSWConfig = {
// ...other options...
templatedURLs: {
'/': ['index.html', 'netlify.toml'],
},
}; You can also do this "by hand" via |
New link to |
Library Affected:
workbox-webpack-plugin@4.2.0 with workbox-build@4.3.1
Browser & Platform:
all browsers
Issue or Feature Request Description:
Hi there, we've got service worker enabled for caching purposes and we also have notification bar in app which informs user about its new version. This notification bar also includes button to update app by click :-)
registerServiceWorker.js of CRA framework with little modifications has following code:
and I append this to resulted serviceWorker.js file for "update" app functionality
From time to time, users are reporting app unavailability with following error in console:
SyntaxError: expected expression, got '<'
The whole problem is that sometimes
index.html
file is not replaced with the newest one, so it points to not-existing css/js files. How can it be possible?The text was updated successfully, but these errors were encountered: