GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → AnthumChris → Fetch Progress Indicators

AnthumChris / Fetch Progress Indicators

Licence: mit
Progress indicators/bars using Streams, Service Workers, and Fetch APIs

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

htmlstreamservice-workerfetch-api

Projects that are alternatives of or similar to Fetch Progress Indicators

Node Fetch
A light-weight module that brings the Fetch API to Node.js
Stars: ✭ 7,176 (+3864.64%)
Mutual labels:  stream, fetch-api
html
HTML templating and streaming response library for Service Worker-like environments such as Cloudflare Workers.
Stars: ✭ 41 (-77.35%)
Mutual labels:  service-worker, fetch-api
Streamsaver.js
StreamSaver writes stream to the filesystem directly asynchronous
Stars: ✭ 2,784 (+1438.12%)
Mutual labels:  stream, service-worker
Fetch Stream Audio
Low Latency web audio playback examples for decoding audio streams in chunks with Fetch & Streams APIs
Stars: ✭ 153 (-15.47%)
Mutual labels:  stream, fetch-api
Magicalexoplayer
The Easiest Way To Play/Stream Video And Audio Using Google ExoPlayer In Your Android Application
Stars: ✭ 171 (-5.52%)
Mutual labels:  stream
Fpgo
Monad, Functional Programming features for Golang
Stars: ✭ 165 (-8.84%)
Mutual labels:  stream
Notes
Offline-first notepad PWA
Stars: ✭ 163 (-9.94%)
Mutual labels:  service-worker
Speedment
Speedment is a Stream ORM Java Toolkit and Runtime
Stars: ✭ 1,978 (+992.82%)
Mutual labels:  stream
Audioplayer
Audio Player for Nextcloud and ownCloud
Stars: ✭ 179 (-1.1%)
Mutual labels:  stream
Scramjet
Simple yet powerful live data computation framework
Stars: ✭ 171 (-5.52%)
Mutual labels:  stream
Rxjava2 Extras
Utilities for use with RxJava 2
Stars: ✭ 167 (-7.73%)
Mutual labels:  stream
Nohost
A web server in your web browser
Stars: ✭ 164 (-9.39%)
Mutual labels:  service-worker
Tlog
Terminal I/O logger
Stars: ✭ 170 (-6.08%)
Mutual labels:  stream
Rapidbay
Self-hosted torrent video streaming service compatible with Chromecast and AppleTV deployable in the cloud
Stars: ✭ 163 (-9.94%)
Mutual labels:  stream
Stream Site
Rachni - nginx RTMP streaming front end
Stars: ✭ 172 (-4.97%)
Mutual labels:  stream
Learning Pwa
📱some samples and blogs about how to start with your first PWA
Stars: ✭ 162 (-10.5%)
Mutual labels:  service-worker
Multiqueue
A fast mpmc queue with broadcast capabilities
Stars: ✭ 167 (-7.73%)
Mutual labels:  stream
Quic.net
A .NET C# Implementation of QUIC protocol - Google's experimental transport layer.
Stars: ✭ 173 (-4.42%)
Mutual labels:  stream
Pwatter
Angular Progressive Web App using Workbox
Stars: ✭ 167 (-7.73%)
Mutual labels:  service-worker
Rxdownloader
Demo of Downloading Songs/Images through Android Download Manager using RxJava2
Stars: ✭ 166 (-8.29%)
Mutual labels:  stream
View All Similar Projects ➔

Examples for showing progress bars and progress indicators for fetch(). Uses the Fetch API, Streams API, and Service Worker API.


Demo

https://fetch-progress.anthum.com/



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.

Gzip & Content-Encoding Support

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].