Offline Download Manager

The Offline Download Manager plugin lets your app download and manage document and media files directly on the device. Users can access downloaded files without a network connection, and you can track download progress and manage files through a built-in interface or programmatically through the JavaScript bridge.

Why use Offline Download Manager

Offline access removes dependency on network connectivity for content-heavy apps. Instead of streaming or re-fetching files on every visit, downloaded content is available instantly, even in airplane mode.

• Document and media apps: Let users download articles, PDFs, audio, or video for offline reading or playback.
• Field service apps: Ensure technicians can access manuals and forms when working in areas with no connectivity.
• Training and education apps: Allow learners to download course materials before a commute or travel.
• Content subscription apps: Enable subscribers to save content locally for offline consumption.

Implementation Guide

JavaScript bridge functions

Use the following JavaScript bridge functions to initialize the download manager, start downloads, and display the file management UI.

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:

{/* 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:

<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:

<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.

Troubleshooting

function median_library_ready() {
  // safe to call median.downloads functions here
}

// fallback if bridge initialized before page loaded
if (window.median) {
  median_library_ready();
}

Offline Download Manager Demo App