How to add offline functionality to your app

When creating an app with Fliplet, some features are available to use offline. This article provides an overview of each of the features available inside Fliplet studio and confirms whether they are available offline.

Why use offline functionality?

Setting up your components to be available offline will ensure your app can still be functional when users have an unstable or slow connection, i.e at an event, on the go, or whilst traveling.
When using an app, most users expect at least some sort of offline functionality, setting your components to be available offline can provide users with additional offline functions.

This article provides an overview of each of the components available inside Fliplet studio and confirms whether they are available offline.
The below table details any required settings and the expected offline functionality.

Get started

Use the table below to understand which features work offline, the required settings, and the expected offline functionality.

Note: Many of the components require the following actions to work offline, refer to the table to see which required settings apply.

1. Include the data source in the app bundle

Find the setting labeled Do you want to exclude this data when downloading the app? and make sure it is not checked.

When this box is checked, the data source is left out of the downloaded app and has to be loaded from the server at runtime, which needs an internet connection. When it is unchecked, the row data is packaged with the app and available offline.

2. Decide whether images in your rows should be bundled

The row-data setting above covers text, numbers, dates and other values stored in your data source. Images stored in data source columns are handled separately.

By default, images in list rows are not packaged with the app, so they will not appear when the device is offline. If you need images in your list to work offline, contact Fliplet support and ask them to enable image bundling for the data source. See Bundling images used in list data below for what Fliplet will package and what it will skip.

3. Enable data source incremental updates

This is a setting switched on by default. If you have followed all actions and the component does not work offline, please contact Fliplet support to check the setting

Feature	Type	Available offline?	Required settings	Expected offline functionality
Analytics	Studio feature	Yes	–	Automatically queued for later in case network is missing or API outage
App Actions	Studio feature	No	–	–
App List	Component	Yes	Turn on data source bundling in DS settings Enable data source incremental updates	Users can access the list of apps and view other apps offline
Charts	Component	Yes	Turn on data source bundling in DS settings Enable data source incremental updates	The chart can be displayed using the offline data. If updates are made to the data of a chart via a form or changes to the data source, this will not display
Chat	Component	Yes – partially	Turn on data source bundling in DS settings Enable data source incremental updates	Contact list data is available offline Chat conversations can be viewed offline, up to the last 50 messages across all most recent conversations
DS API	Development feature/ custom feature	Yes	Turn on data source bundling in DS settings	The query will work offline if the data source is bundled Aggregate query works offline if all data sources are bundled
Email		Yes	See https://developers.fliplet.com/API/fliplet-communicate.html	The request will be saved if the device is offline. When the device comes online, the saved requests will be sent.
Fliplet Login	Component	No	–	–
Fliplet.Audio.Player	Development feature/ custom feature	Yes	None	Audio files are available for offline playback if the user downloads the audio file
Fliplet.Gamify	Development feature/ custom feature	Yes	Turn on data source bundling in DS settings Enable data source incremental updates	Gamification data is available offline
Fliplet.OAuth2	Component	No	–	–
Form	Component	Yes	Turn on data source bundling in DS settings Enable data source incremental updates Enable offline form submission in form settings 1. Click on the form component 2. Click the settings tab 3. Under “When the form is submitted…” ensure “Add new submissions to a data source” is checked 4. Under “Submit form when the device is…” Ensure “Online & Offline – The user can submit their form even when they don’t have an internet connection, and the entry will be sent to the data source as soon as a connection is available” is checked	Data added via a form will be submitted as soon as an internet connection is available
Image component	Component	Yes	None – files connected to image components are automatically bundled offline	Images are visible offline
In-App updates	Studio feature	No	–	–
Interactive graphics	Component	No	–	–
Link	Component	Yes	None – files connected to links are automatically bundled offline	Files are available to be opened offline
List (from data source)	Component	Yes – partially	Turn on data source bundling in DS settings Enable data source incremental updates	List data is available offline. Bookmarks, comments and likes are viewable offline. New bookmarks, comments and likes are submitted as soon as an internet connection is available. Images in list rows only appear offline when image bundling is enabled and the image URLs meet the conditions in Bundling images used in list data. For large data sources, consider whether the extra app size and slower first load are worth the offline coverage.
Login	Component	No	–	–
Logs	Studio feature	Yes	–	Automatically queued for later in case network is missing or API outage
Notifications	Component	No	This feature is currently not available offline, but coming soon	–
Offline video	Component	Yes	None – Offline videos are automatically bundled offline	Video file is available for offline playback
Online video	Component	No	–	–
Payments	Development feature/ custom feature	No	–	–
SMS	Development feature/ custom feature	Yes	See https://developers.fliplet.com/API/fliplet-communicate.html	The request will be saved if the device is offline. When the device comes online, the saved requests will be sent.
SSO Login	Component	No	–	–
Subscribing to push notifications	Component	No	–	–
Verification: Email	Component	No	–	–
Verification: SMS	Component	No	–	–

Bundling images used in list data

When image bundling is enabled on a data source, Fliplet downloads the images used in your rows into the app package so they appear offline. There are some conditions to be aware of.

How to enable it

Open the data source in Fliplet Studio and click the Settings tab. In the Data source definition field, add the bundleImages key to the JSON:

{
  "bundleImages": true
}

If other keys are already present, add bundleImages alongside them:

{
  "indexes": ["Email"],
  "bundleImages": true
}

Save the data source and rebuild your app so the bundle is regenerated.

What gets bundled

Fliplet scans every column in every row and packages values that are direct image URLs. A value is packaged when:

• It starts with http:// or https://, and
• It ends with .jpg, .jpeg, .gif or .png (a query string after the extension is allowed).

What is not bundled

The following image values stay as live URLs and will not appear offline, even with image bundling enabled:

• Images stored as Fliplet media file IDs (a plain number in the cell).
• Image links of the form https://api.fliplet.com/v1/media/files/<id>/contents, because they do not end in a recognized image extension.
• Images with extensions such as .webp, .svg, .avif or .heic.

Tip: If you want an image in a list row to work offline, store the image somewhere it can be served from a public URL that ends in .jpg, .jpeg, .gif or .png, and paste that URL into the data source cell. If images still do not appear offline If bundleImages is set, your image values match the format conditions above, and the app has been rebuilt, but images still do not load offline on device, contact Fliplet support. There are runtime checks the List (from data source) component performs on image URLs that can interact with bundled images, and support can diagnose these case by case.