This Guide explains how to use and configure the Download & Offline experience feature in the app.
The download feature is a cell action plugin which allows to download supported video entries, so that they can be played in the app even if the device is offline.
The Offline experience feature provides a specific user experience when the device is offline, blocking actions which cannot be completed when there is no network, and allowing to present content available offline.
Prepare your media items
The download button can be added to any cell style but it will only show up if the item presented in the cell is a video item. As such, it should have a
content.type property containing
On top of this, you need to flag items which are eligible for downloads. By default, the Offline content button plugin will look if the item's
extension.hqme is set to true, but you can define any other entry property to be used as a check for download elligibility in the Offline Content Button plugin configuration.
Downloads can work with assets requiring login. If you have such a use case, please contact the UX team to check if the login provider you use is already updated to work with downloads.
Adding the download plugin to an app
The ‘Offline Content Action’ plugin is needed in order to use the download feature. This should be added via the plugin gallery.
Customizing assets/styles of download plugin
There are a number of assets and styles that can be customized within the ‘Offline Content Button Action’ plugin. There are two ‘Flavors’ of assets which enables two different styles of assets to be used for downloads. For example - a light colored set of assets might be needed to display over a dark background and vice versa for light colored backgrounds of elements within an app.
The flavor of action assets can be selected within the cell style configuration via the ‘Action asset flavor’ dropdown.
For each ‘flavor’ the following can be customized:
- Download Asset
- Processing Asset
- Processing Asset rotation speed
- Download progress asset width
- Download progress thickness
- Download progress total color
- Download progress current color
- Download completed asset
- Download error asset
- Download expired asset
Note: All assets should be supplied at 44x44 @3x (132x132 px) unless an action button is configured at a different size.
These can be uploaded and configured via the plugin itself. The flavor type is then referenced in the cell style when the action button is defined.
Adding download action to a cell style
One action button can be added to a single cell. There are various locations the action buttons can be placed - the illustration below shows where they are on the different power cells.
The screenshot below shows how the download action should be configured within the cell style configuration.
Using downloads with the Modal Bottom Sheet plugin
When you want to show multiple actions on a cell, you can use the Modal Bottom Sheet plugin. Simply follow the provided guide, which explains specifically how the download actions can be set up using this feature.
The messaging for the different download states can be configured in the Localization section of the plugin. This also covers any labelling that is used in native alerts/modals which are used for managing downloads.
Ths full list of localization strings include:
|Processing label||Preparing your download...|
|Download Complete label||Downloaded|
|Download Failed label||Download Failed|
|Download Expired label||Download expired|
|Cancel Download prompt||Cancel download|
|Delete Download prompt||Delete download|
|Retry Download prompt||Rety download|
|Play Item prompt||Play|
|Cancel button label||Cancel|
|Alert Title Message||Warning!|
|Alert Cancel Load Message||Do you really want to cancel loading an item?|
|Alert Delete Item Message||Do you really want to delete saved item?|
|Alert Error Message||Can not load an item, please try again later|
|Alert OK Button||OK|
|Alert Cellular Network Message||Your device is using cellular network. Do you really want to load an item?|
|Alert Confirm Button||I’am sure|
|Alert Cancel Button||Cancel|
|Feed Title||Downloaded items|
|Feed Summary||Select a download item to watch|
Other plugin fields that can be changed include: iOS/Android assets bundle upload Is loadable mapper: extensions.hqme Is test environment: On/Off
Displaying Downloads: creating a Downloads Screen
Similar to other action plugins (favourites, continue watching...), downloaded items can be presented in any component on any screen. Simply create a feed using the pipes scheme, and the corresponding endpoint:
Attaching this feed to a component will present all downloaded items.
The Offline Experience plugin provides a set of features to provide a clear user experience when the devices is offline. It contains a number of elements which you can configure: The top toast banner & a fallback screen.
Add ‘Offline Experience’ to an app
The plugin should be added to the app via the plugin gallery. Configuration of the toast banner & fallback screen can be changed via the plugin.
Defining ‘Offline Home’ Screen
A screen can be shown when opening the app when offline. This can be selected within the ‘Layout Settings’ modal launched from within the layout.
Customizing the offline experience
Configuration of the Offline Experience can be found in the plugin itself. There are two elements that can be configured:
- The Offline Toast
- The Offline Fallback Screen
The Offline Toast has two states: Online & Offline. These will show when connectivity changes to let the user know that they are online or offline. Configuration includes background color & typography for each state.
The Offline Fallback Screen is shown when navigating to a non-offline enabled screen when offline. This screen consists of an image asset, 2x text labels & 2x buttons which can be styled using configuration found within the plugin. Each of these elements can be toggled on/off. The buttons have two actions:
- Retry: tapping this retries the internet connection so that the screen can be loaded.
- Offline Home: This button directs the user to the screen that has been setup to be viewed in offline mode. Typically this would be the ‘Downloads’ screen.
Messaging for the Offline Toast, Offline Fallback Screen & native alerts can be configured within the localization section of the plugin.
|Localization Setting||Default Value|
|Offline toast message||No internet connection|
|Online toast message||You are back online|
|Offline alert title||Network Error|
|Offline alert message||Failed to connect. Please check your device’s network connection|
|Offline Cancel button label||Cancel|
|Offline Retry button label||Retry|
|Offline Fallback Screen title||No network connection|
|Offline Fallback Screen message||You can still watch downloaded items|
|Offline Fallback Screen Retry button label||Retry|
|Offline Fallback Screen Action button label||Go to downloads|
Empty Group component
When there are no downloaded items, you may want to use the Empty Group Component to configure how the components with the downloaded items will look when there are no items to present.