I have a simple PWA app built with Webpack and React.
It has code splitting setup on dynamic imports (e.g. React.lazy(() => import('./SomeRoute'))) so different routes get different JS bundles, e.g.: main.bundle.js, someRoute.bundle.js
Now imagine the situation: I deploy a new version of the app that doesn't have SomeRoute at all or has something completely different in it. The app would try to reach https://myapp.com/someRoute.bundle.js and fail as that asset is no longer there. App reload would obviously help, but still, that won't be a pleasant behaviour.
One solution that I see would be to include the content hash into all assets, so it would be someRoute.1e4f.js and then host all those different app versions for some time period, until all app users have the latest version of the app.
If this is the way to go, then I don't know how to organise it. I currently host my PWA with vercel.com (ex. Zeit), and I never saw if they have the feature to keep assets from past builds available. Of course I could commit all build artefacts into git, but that would very quickly bloat the repo.
Another solution would be to pre-fetch all app's routes at initial load and keep them cached in a service worker. That would obviously help, but it defeats the purpose of code-splitting to reduce the network traffic usage.
Another solution is to detect 404 on JS chunks and force-reload the app. That would be a very unpleasant UX for some users.
So how do serious apps handle it? I'm surprised how such essential problem lacks attention.