Offline Sync Add-On is the optional component of Code On Time that makes it easy to create offline applications. Enable the add-on in the app configuration and it will behave differently for users with the “Offline” role. Data linked directly and indirectly to the “offline” pages is automatically downloaded to the client device when users log in. Additionally, the entire set of files referenced in the app manifest is placed in the cache of the host WebView or browser.
The add-on turns an online app into an offline-first application without writing a single line of code.
The add-on persists the log of changes captured by Offline Data Processor in the top-level forms when users save their work. The expected outcome of Insert, Update, and Delete is simulated on the JSON representation of downloaded data. Users must explicitly choose to sync the accumulated changes with the server application when a stable online connection is available. The app will submit the change logs to its server components during the synchronization. The server code will commit the changes to the database. The add-on refreshes the server field values of the changed data items with the optional reconciliation of errors. Users may also choose to download the fresh set of the front-end files, offline pages, and their data.
Users with the “Offline” role always work with the offline data on the “offline” pages. Other app users are taking advantage of the atomic data entry provided by the ODP on the pages marked as “offline”. Changes are persisted to the server when the top-level forms are saved. This ensures a consistent online and offline behavior of the app.
Offline users also have access to the online pages of the app if the device is online. Online pages disappear from the navigation menu of the offline users when the device loses the connection.
Proven Established Technology
Offline Sync works in any browser that implements the ServiceWorker, IndexedDB, and Cache APIs. Users in the “Offline” role are always working in the offline mode and do not depend on the status of the network connection.
Service Worker
Apps created with Code On Time are registering their service worker script by default. Browsers place the script in the sandbox and keep it informed about HTTP requests to the back-end on the server. The worker fetches the cached versions of the “offline” pages from the “user” cache. JavaScript, CSS, and font files are fetched from the “static” cache. BLOBs are fetched from the “blob” object store of the IndexedDB database. The caching of resources occurs when users in the “Offline” role are logged into the app.
Data Stores in IndexedDB Database
The service worker creates an empty “offline” database managed by IndexedDB. The “data” and “blob” data stores are created in the database and populated when the “Offline” users have their identity confirmed. User account data is persisted as collections of JSON objects. Offline Sync performs the data manipulation requests on the stored object instances. Data entry logs are saved in the “data” object store as well. Offline Sync sends the logs when users are synchronizing the pending changes with the back-end.
Resources in Cache Storage
Offline Sync downloads the static resources when users in the “Offline” role are logged into the application. A collection of pages marked as “offline” is placed in the “user” cache. The service worker will locate the relevant resources in the cache storage whether or not the network connection is available. This makes it possible for an application to work in the true “always offline” mode.
Flexible Licensing
The same app can support both online and offline users while providing the consistent date entry experience. Online users have their data persisted when the top-level form is saved. Offline users have an extra duty to sync their pending changes with the app on the server.
Offline Sync licensing is based on users with the “Offline” role. It is easy for a business to figure out the exact number of users that will not have a stable network connection. Offline mode is enabled for a user with a simple role assignment. Human resource changes can be reflected in the app by removing the “Offline” role from one user and assigning it to another.
Live Demo
Try an app with Offline Sync Add-on in action at https://demo.codeontime.com. Sign in with the username offline and password offline123% to experience the disconnected mode.