Skip to main content

Downloads and Offline experience

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

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 eligibility in the Offline Content Button plugin configuration.

info

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.

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.

Offline content action plugin

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.

Screenshot of flavors in action

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
info

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.

Offline action assets & styles

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.

Download action in cell

The screenshot below shows how the download action should be configured within the cell style configuration.

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

Localizations

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.

Localizations

Ths full list of localization strings include:

Localization Setting DefaultValue
Language (Dropdown)English
Download labelDownload
Processing labelPreparing your download...
Downloading labelDownloading...
Download Complete labelDownloaded
Download Failed labelDownload Failed
Download Expired labelDownload expired
Cancel Download promptCancel download
Delete Download promptDelete download
Retry Download promptRety download
Play Item promptPlay
Cancel button labelCancel
Alert Title MessageWarning!
Alert Cancel Load MessageDo you really want to cancel loading an item?
Alert Delete Item MessageDo you really want to delete saved item?
Alert Error MessageCan not load an item, please try again later
Alert OK ButtonOK
Alert Cellular Network MessageYour device is using cellular network. Do you really want to load an item?
Alert Confirm ButtonI’am sure
Alert Cancel ButtonCancel
Feed TitleDownloaded items
Feed SummarySelect 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:

pipesv2://offline-content-button

Attaching this feed to a component will present all downloaded items.

Offline Experience

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.

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

Define offline home

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.

Offline Toast

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.

Offline Fallback screen

Localizations

Messaging for the Offline Toast, Offline Fallback Screen & native alerts can be configured within the localization section of the plugin.

Localizations settings

Localization SettingDefault Value
Language (Dropdown)English
Offline toast messageNo internet connection
Online toast messageYou are back online
Offline alert titleNetwork Error
Offline alert messageFailed to connect. Please check your device’s network connection
Offline Cancel button labelCancel
Offline Retry button labelRetry
Offline Fallback Screen titleNo network connection
Offline Fallback Screen messageYou can still watch downloaded items
Offline Fallback Screen Retry button labelRetry
Offline Fallback Screen Action button labelGo 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.