Native Browser progress bar UI interaction.

[jimmywarting]

One thing browsers do well when downloading things the good old normally way is showing a progress bar, speed & time est. It can also add something to the list of things that have been downloaded with a link to where it got it from. in the best world it can also retry failed attempts and continue from where it left off if it accepts partal/range requests.

it gives you that feeling that something is being downloaded and something is happening.

You do not get this when using showSaveFilePicker things are pretty much being downloaded in the background without the user knowing what is going on, unless you re-implement all of this yourself with html.

it would be neat if there where some way of interacting with the browsers native UI controller in a more low level way.

something like:

const handle = showSaveFilePicker(...)

const progressUI = handle.createProgressBar({
  downloadUrl: 'https://example.com/movie.mp4', // would be added to download history (to be re-downloaded)
  totalSize: 1024, // indicated how large the file is to show a %
  signal: new AbortController().signal // could be shared with fetch and make abort signal work hand in hand
})

progressUI.written(512)
progressUI.oncancel = () => {
  // user canceled the download
}
progressUI.onpause = () => {
  // user paused the download
}
progressUI.onretry = () => {
  // user wants to try and re-download something.
}

// some methods doing stuff
progressUI.close()
progressUI.finish()
progressUI.abort()

it could maybe even be nice to flesh this ☝️ out as a separate browser api so that it's not tied to a file handle. Maybe we could use the native progress UI for more things than just saving files. like taking the app offline. we could maybe use it as a mean to download things to the sandboxed file system. So that we would have something like: new globalThis.NativeProgressUI({ ... })

or maybe someone is using webtorrent, caching things, downloading a movie to any of the browsers built in storage.

[mathieu-fournier]

For now, is there a way/workaround to manually show the native download manager while downloading ?

[guillaumebrunerie]

I had the same issue recently and ended up using react-toastify to inform the user of what is going on. I'm pretty happy with the result, but it's definitely more work than when the browser shows downloaded file automatically, it would be nice to have something native.

[jimmywarting]

For now, is there a way/workaround to manually show the native download manager while downloading ?

StreamSaver.js is a lib i have built to download folders the good old fashion way. it emulates how a server saves a file with service worker. and you can specify a content-length if you know the size beforehand. it will utilize the hole progressUI and download history and even time est and all off that. but that's just for saving one file to the disc