I've a situation where React web-app would download user's 100s (ex: 100-200) of images (which are less than 20MB, avg ~8MB) and goal is to show the image content on web-app's screen as soon as possible. We use JS' <img src="URL"> for this which seems very crude way for image downloads. The images could be of type .jpg, .png and .gif.
The current experience is very bad, and we hit several network errors while JS attempting 100s of image downloads simultaneously. There are many errors ex: `failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR'.
I think parallel requests using service workers can be one option. Want to understand if there are any industry standard to solve this problem.
Actually HTTP2 protocol was specifically designed for such situation. It must handle 100s of simultaneous images absolutely gracefully.
Make sure HTTP2 is properly configured on your server. net::ERR_HTTP2_PROTOCOL_ERROR indicates there are some issues with your configuration, maybe something's wrong with SSL certificates.
The old approach for this case was: create multiple domains referencing at the same physical server to help browser fire more simultaneous requests. But with HTTP2 now it doesn't make much sense.