Fetch & Streams API Progress Indicator Examples

Service Worker - Basic

An inline <img> tag renders on the page while a Service Worker and ReadableStream simultaneously provide download progress. Minimal code is used to exemplify the basic JavaScript requirements.

Fetch - Basic

A ReadableStream shows progress while a remote image is downloaded with fetch(). Minimal code is used to exemplify the basic JavaScript requirements.

Fetch - Enhanced

Similar to above with progress bars and robust code to handle real-world UI interactions. Downloads can be cancelled/restarted, multiple downloads are prevented, race conditions don't exist, errors edge cases are handled.

Service Worker - Enhanced UI

[not yet started]. This will exemplify progress for multiple <img> tags, download cancellations, and other real-world UI interactions.