Skip to content

Formbird Offline Mode

Context and Purpose

Formbird App's offline mode is designed to ensure continuous access to data in environments with unreliable internet connectivity. This mode is critical for maintaining data access during unexpected loss of connection, such as during an online query. When connectivity is lost, the app seamlessly transitions to offline queries, guaranteeing uninterrupted data availability.

Setting Up Offline Access

1. Create Offline Keys

Offline keys are unique identifiers (UUIDs) used to mark documents for offline access. Generate a UUID, for example: 111F2361-D32A-4C8F-85E3-A8D6AD079B05.

2. Assign Offline Keys to Documents

To make documents available offline, add the offline key to the keyIds array in the systemHeader of each document. This is essential for offline access.

Example Document with Offline Key:

{
  ...
  "systemHeader": {
    ...
    "systemType": "document",
    "keyIds": ["111F2361-D32A-4C8F-85E3-A8D6AD079B05"]
  }
}

Additionally, for enabling offline access in documents created using a specific template or by a user account, add the offline key to the attachKeys property of the template or account.

Example of Template or User Account with Offline Key:

{
  "attachKeys": ["111F2361-D32A-4C8F-85E3-A8D6AD079B05"]
}

3. Configure User Access for Offline Usage

Add the offline key to accountControl documents for users requiring offline access. This grants necessary permissions for offline document manipulation.

Example of User Access Configuration:

{
  "accessKeys": [
    {
      "keyId": "111F2361-D32A-4C8F-85E3-A8D6AD079B05",
      "rights": ["Create", "Update", "Read", "Offline"]
    }
  ]
}

4. Offline Maps Configuration

If offline maps are required, include the necessary geographic areas in the accountGroupConfig documents. Link these documents to the user accounts needing offline map access.

Example of Map Bounding Box Definition in the accountGroupConfig document:

{
  "tileServerGLCacheBounds": [
        147.24710 ,
        -42.90330,
        147.32692,
        -42.80992
    ]
}

Also, within the sc-street-address component that is required offline, tileServerGL needs to be set to true to use the cached maps.

json { "componentName": "sc-street-address", "name": "streetAddress", "tileServerGL": true, ... }

Note: The accountGroupConfig stores user-related application configurations and can be linked with multiple user accounts. Detailed instructions for linking can be found in the Formbird documentation.

5. Include Offline Libraries

For libraries needed offline (e.g., d3.js), create vendorLibrary documents. Include the library URL and the offline key to ensure availability in offline mode.

Example of a Vendor Library Document for Offline Access:

{
  "documentId": "e2bdbe4f-4acb-43d6-9511-f002496a6160",
  "name": "d3",
  "fileName": "https://cdn.jsdelivr.net/npm/d3@3.5.6/d3.min.js",
  "systemHeader": {
    "systemType": "vendorLibrary",
    "keyIds": ["111F2361-D32A-4C8F-85E3-A8D6AD079B05"]
  }
}

Template Reference: Use the template available at Formbird Vendor Library Template to create or modify vendor library documents.

6. Querying Data Offline

To test queries offline without taking the device offline, utilize the template at Offline Query Testing. This template uses the searchOfflineOnly option to force the datatable to always run the offline query, even when online.

json { "componentName": "sc-datatables", "searchOptions": { "searchOfflineOnly": true } ... }

Technologies Behind Offline Mode

  • IndexedDB: Formbird utilizes IndexedDB for offline data storage. This web-based database stores data in the user's browser, allowing for efficient and secure access to data in offline mode.

  • Service Worker: Static files and app components are cached using a Service Worker. This technology is fundamental in controlling the caching process, enabling the app to function seamlessly offline by storing necessary static resources.