Progress indicators/bars using Streams, Service Workers, and Fetch APIs
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8f12690 Mar 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.conf/nginx Added 120kbps endpoint Mar 1, 2018
fetch-basic add GA Mar 5, 2018
fetch-enhanced fix firefox restart/stop buttons on fetch-enhanced Mar 7, 2018
images update share icon image Mar 5, 2018
sw-basic sw-basic works in Firefox 59 (#9) Mar 7, 2018
test indicated FF in test file Mar 8, 2018
LICENSE Create LICENSE Mar 3, 2018
README.md add FF bug to README Mar 19, 2018
favicon.ico favicon filename Feb 28, 2018
index.html add GA Mar 5, 2018

README.md

This repository provides working examples for implementing progress bars and progress indicators with the Fetch API, Streams API, and Service Worker API.

Examples

  • Fetch: A ReadableStream is used to show download progress during a fetch() download.
  • Fetch - Enhanced: Same as above with robust code for preventing multiple downloads and handling other real-world UI interactions and edge cases.
  • Service Worker: A ReadableStream is used in a Service Worker to simulatenously show download progress for the FetchEvent of an inline <img> tag.

Browser Support

The aforementioned APIs are new/expermiental and do not currently work on all browsers. Testing was done with the browsers below:

Browser Test Results
Chrome 64 Full support
Firefox 58/59 Full support (requires activation of experimental flags)
iOS Safari 8 Unsupported
iOs Safari 11 Fetch support only. Service Workers unsupported
Mac Safari 11.0 Fetch support only. Service Workers unsupported
Mac Safari 11.1 Full Support
IE/Edge Not tested (no device available)

Background

Prior to the recent addition of fetch(), the XMLHttpRequest.onprogress callback handler was traditionally used to show progress bars and progress indicators. The Fetch API is great and we should use it, but "onprogress" handlers are not currently implemented with Fetch. These examples allow us to leverage Fetch while providing users with immediate feedback during certain "loading" states. Progress indicators could be especially useful to users on slow networks.

Lessons & Conclusions

This repository began as a proof of concept for showing progress indicators from Service Workers. Everything seemed to work out and a few important lessons and caveats were discovered:

  1. Firefox successfully stops network reading and cancels downloads on fetch events that implement custom ReadableStream readers when the user signals the cancelation/abort of a page load (e.g. pressing ESC, clicking stop button, invoking window.stop())
  2. Chrome and Safari don't stop network reading and files continue to download when a page load cancel/abort occurs.
  3. The abort event does not seem to be firing on Chrome, Firefox, or Safari as defined in the HTML spec 7.8.12 Aborting a document load.
    1. <img onabort> callbacks are not called.
    2. window.onabort callbacks are not called.
    3. see Abort Event Detection Test
  4. A Firefox bug was discovered when using hash fragments in URLs: https://bugzilla.mozilla.org/show_bug.cgi?id=1443850

Back-End Image Server

To properly exemplify progress indicators for slow downloads or large files, a small (100kb) JPEG is being served from a remote HTTP/2 Nginx server that limits download speeds. The buffer/packet size is also reduced to show smoother, or more frequent progress updates (more iterations of ReadableStreamDefaultReader.read()). Otherwise, read() would send fewer progress updates that result in choppy progress indicators. Caching is disabled to force network requests for repeated tests.

Both Baseline and Progressive JPEG files are available for testing with other speeds:

https://fetch-progress.anthum.com/10kbps/images/sunrise-baseline.jpg
https://fetch-progress.anthum.com/20kbps/images/sunrise-baseline.jpg
https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg
https://fetch-progress.anthum.com/60kbps/images/sunrise-baseline.jpg
https://fetch-progress.anthum.com/120kbps/images/sunrise-baseline.jpg

https://fetch-progress.anthum.com/10kbps/images/sunrise-progressive.jpg
https://fetch-progress.anthum.com/20kbps/images/sunrise-progressive.jpg
https://fetch-progress.anthum.com/30kbps/images/sunrise-progressive.jpg
https://fetch-progress.anthum.com/60kbps/images/sunrise-progressive.jpg
https://fetch-progress.anthum.com/120kbps/images/sunrise-progressive.jpg