Download document and media files to the user's device for online or offline access. Files are viewable through a built-in file manager UI as well as programmatically.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/offline-download-manager/

Once the premium module has been added to your app, you may use the following Median JavaScript Bridge commands to access its functionality.

Initialization

Create a JavaScript function to receive status events, e.g.

function downloadCallback(data) {
  console.log(data);
}

Before starting any downloads, you will need to register your callback by running the following command using the Median JavaScript Bridge through HTML or JavaScript:

↔️Median JavaScript Bridge

HTMLJavascript

<!-- Note: This command returns a promise -->
<button onclick="median.downloads.init({'callback': downloadCallback})">Register Download Callback</button>

median.downloads.init({'callback': downloadCallback}); // returns promise

Tip: Some JS Bridge commands return promises. They are usually declared as such through a comment to help you identify them. Learn More

Starting Downloads

To start a download, run the following command using the Median JavaScript Bridge:

↔️Median JavaScript Bridge

HTMLJavascript

<button onclick="median.downloads.downloadFile({'url': 'URL', 'title': 'Title'})">Start Download</button>

median.downloads.downloadFile({'url': 'URL', 'title': 'Title'});

Params "url" and "title" are required, all others are optional.
Supported parameters are:

• url: The URL of the file to download. Should start with http or https.
• title: The name to show in the UI.
• identifier (optional): a string used to identify the download in the downloadCallback function, so that multiple simultaneous downloads can be differentiated.
• details (optional): additional information to show below the title. A description of the download.
• date (optional): a date in yyyy-mm-dd format to show below the details. Can be used to show a publish date for a podcast, for example.

After a download is started, the callback function will be called with a data object with the following fields:

• identifier: the identifier passed to the downloadFile command
• event: "progress", "done", or "error"

If event is "progress":

• bytesWritten: the number of bytes that have been downloaded
• expectedBytes: the file sized indicated by the server

If event is "error":

• errorMessage: A string indicating the reason for the error

Showing UI

To show the download manager user interface, run the following command using the Median JavaScript Bridge:

↔️Median JavaScript Bridge

HTMLJavascript

<button onclick="median.downloads.showUI()">Show Download Manager UI</button>

median.downloads.showUI();

Offline Page

Typically your app will cache the pages for display offline. To ensure the download manager UI can still be opened when the app if offline for an extended period configure an offline.html page within your app. See Offline Page and review the sample offline page below or on Codepen.