Skip to main content

PWA Setup

Last updated 10/04/2026

Setting up PWA With Offline Support in Five​

Follow these steps to implement offline functionality using Five's PWA capabilities, starting from a custom action plugin (.zip).

Step 1 - Create a Custom Action Plugin​

Begin by creating a new custom action in Five and exporting it as a .zip plugin. This plugin will contain your client-side code where offline functionality is implemented.

  • Use this plugin as your working environment for PWA logic
  • Ensure your code runs on the client-side

Step 2 - Initialize Offline Tables on Load​

At the very start of your plugin, for example, on component mount or initialization, you must initialize all required offline tables.

This ensures IndexedDB is properly set up before any read/write operations occur.

 Example:
JavaScript
five.initializeRequiredTables(['CheckIns', 'Users'], () => {
    five.log('Offline tables ready');
});

Key Notes:
  • This step is mandatory
  • All tables you plan to use offline must be included in the array
  • This should only be called once during initialization

Step 3 - Structure Your Data With a Key​

Before storing any data offline, ensure every record includes a

key
property.

 Example:
JavaScript
{
    key: '123',
    name: 'John Doe',
    status: 'Checked In'
}

Key Notes:
  • The
    key
    is required for indexing in IndexedDB
  • It must be unique per record
  • It must match the key used in record-level operations

Step 4 - Save Data Offline​

You can store data either as a full dataset or individual records.

 Save a single record:
JavaScript
five.saveRecordOffline(
    'CheckIns',
    '123',
    { key: '123', name: 'John Doe' }
);

Save multiple records:
JavaScript
five.saveTableOffline('CheckIns', [
    { key: '1', name: 'John'},
    { key: '2', name: 'Jane'}
]);

Step 5 - Retrieve Offline Data​

Use the provided functions to load data from local storage.

 Get a single record:
JavaScript
five.getRecordOffline('Checkins', '123', (record) => {
    console.log(record);
});
Get all records:
JavaScript
five.getTableOffline('CheckIns', (data) => {
    console.log(data);
});

Step 6 - Handle Connectivity Changes​

Register a listener to detect when the application goes online or offline.
JavaScript
const unsubscribe = five.registerOnlineStatusCallback((online) => {
    five.log(`Online: ${online}`);
});
Common use cases:
  • Trigger data sync when connection is restored
  • Update UI to indicate offline mode

Step 7 - Sync Data When Back Online​

When connectivity is restored:

  • Push locally stored data to your backend
  • Refresh local storage using
    saveTableOffline()
    if needed

This ensures consistency between offline and server data.

Step 8 - Deploy as a PWA​

To enable offline capability:

  • Ensure your application is configured as a Progressive Web App
  • Install it on a device
  • Run your custom action within this PWA environment
 Important:
  • Offline functionality will only work inside the PWA
  • Running inside standard Five (non-PWA) will still require connectivity

Summary of Flow​

  1. Create custom action plugin.
  2. Initialize tables with
    initializeRequiredTables()
    .
  3. Ensure all records include a
    key
    .
  4. Save and retrieve data using offline APIs.
  5. Monitor online status.
  6. Sync when reconnected.
  7. Run the solution as a PWA.

This approach ensures your Five application can operate reliably in offline scenarios while maintaining full data integrity and sync capabilities.