Show progress while caching files using a service worker
The example below emits progress indicator events from a Service Worker. You can keep a running progress total for multiple PWA requests reworking the code a bit and changing const total
(declared here) to let total
in global scope to calculate a running byte count total of all the responses. Use HTTP2, otherwise the "total" size will grow as new responses start to come in, yielding inaccurate progress bars. HTTP2 will most likely start all responses at the same time, allowing you to calculate the grand total from the onset, which provides better UX accuracy.
https://fetch-progress.anthum.com/sw-basic/
ReadableStream
is required and not fully implemented by browsers. Mind the browser support.