Overview

The Offline Download Manager plugin allows you to 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/

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

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.

Following the Download progress

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.

Sample App

📘

Sample App - Note

In the sample applications below, you can explore how document and media files are downloaded, along with the callback responses that occur during the download process. Additionally, these apps demonstrate the functionality of the offline file manager. For a complete offline experience, we recommend downloading the Android app and switching to Airplane mode after downloading at least one file.