Offline Mode
This section describes how the Form.io Offline Mode system works.

Introduction

The Form.io offline mode system enables any application to disconnect from the internet and still be able to load forms, load submissions, and submit forms while the device is offline. This works by hooking into the Form.io core renderer module system by creating a Fetch plugin that intercepts any API calls made by the Form.io rendering framework, where once offline, any request that would normally go through the API's are instead redirected to the PouchDB which is a local browser based database that utilizes IndexedDB to store data. Then, once the device comes back online, the offline plugin will empty the queue by re-submitting the API's. Any failed API will then be re-added to the queue.

Offline Module

In order to add Offline support to your application, you must use the Form.io Offline Module. To gain access to this application, you must first have an Enterprise account with Form.io, and through this account, you will then gain access to the Form.io Private Repository found @ https://pkg.form.io.
Once you have been granted access, you can then login to the Form.io Private Repository using your Form.io https://portal.form.io account.
Login to https://pkg.form.io
Once you login to https://pkg.form.io, you should now see the Offline Mode Plugin as follows.
Once you click on this page, you see instructions on how to use this within your own repository, but the following instructions can also be used.

Installation

1
npm install --save --registry https://pkg.form.io @formio/offline-plugin
Copied!
Once this library is installed, you can now use it within your application using the following code.
1
import { Formio } from 'formiojs';
2
import OfflineModule from '@formio/offline-plugin';
3
Formio.use(OfflineModule(
4
'myproject-offline', // The name of this offline instance.
5
'https://myproject.form.io', // Your project URL
6
'path/to/project.json' // If available, the exported project.json file.
7
));
Copied!
For more detailed information, you can go to The Form.io Offline Plugin Documentation page.

Browser Compatibility

Since our Offline Mode plugin uses IndexedDB, any browser that is used must support this technology. Currently, IndexedDB is compatible with all modern browsers including.
  • Chrome v38+
  • Safari 7.1+
  • IE 10+
  • Firefox 13+
The offline plugin operates in two parts. First, queueing any submissions that fail due to a network connect, and second, caching all submissions from the server so they are available when offline.

Submission Queue

Whenever a submission is made, the submission is added to the end of the offline queue and the queue is attempted to be flushed to the server. If a network error occurs it will simply stop and leave the submission in the queue for the next try. The offline queue is a first in first out queue so the first item added will be the first sent to the server.
In the event that a submission error occurs when attempting to send the submission to the server, such as a validation failure, the “offline.formError” event will be triggered. This will then stop the queue flush and wait for the user to fix the error before proceeding.

Submission Caching

When submissions are fetched from the server the request is first sent to the server. If a network error occurs the request is redirected to the offline submission cache and the cached results are returned instead. If the request succeeded from the server the returned submissions are added the the offline cache and the results are returned to the application.

Offline Module API

Once imported into your application, you can use a number of methods to gain access to the functionality of the offline system.
Last modified 10mo ago