In today's fast-paced mobile application development landscape, ensuring a seamless user experience in varying network conditions is paramount. We recently tackled this challenge in our React Native app designed for field engineers.

This was a very specific use case and the requirement of the Offline Support came later on after our application was used by multiple customers in different geographic locations. The application is in use for more than couple of years now. Although, we still encounter some challenges and improvements from time to time.

Our core architecture and data sync mechanism allows developers to add more features without breaking any existing functionalities.

Our app allows route operators to schedule tasks, and drivers download these tasks before embarking on their journeys. These tasks can be day long or can even span multiple days.

Users need to perform operations based on locally stored data and sync their progress back to the server when an Internet connection becomes available. The syncing with server happens transparently and users do not need to perform any special steps.

Local Data Storage with react-native-sqlite-storage

Database Schema

Efficient local data storage serves as the foundation of our offline capability. We utilize react-native-sqlite-storage to establish a well-defined database schema. This schema effectively organizes and manages offline data, including complex data structures. For our use case, the data schema encompasses various entities such as tasks, task detail, and locations.

The flexibility of SQL-based databases like SQLite allows us to represent these entities and their relationships accurately. By designing an efficient schema, we optimize data retrieval and manipulation, even when the application is offline.

Also we carefully designed the schema to ensure that we transfer the store the minimal data to reduce the network latency and ensure the security.

Local File Storage

In our application, we collect user signatures and camera images as Proof of Work, which are integral to our field operations. These media files are stored locally on the device, allowing users to capture and view them even when offline. Local file storage is a crucial component of our offline strategy.

Storing User Signatures

User signatures are essential for verifying the completion of tasks. We capture these signatures using the device's touch input or stylus if available. Once captured, the signature is saved locally as an image file. This image file is associated with the relevant task and can be viewed within the app, providing a visual confirmation of the work done.

Having variety of devices out there in the market, it's very likely that each device generates different quality of images, resulting into different size. If compress and store the minimal quality images and ensure that these images are still clear and visible for the manual review purposes.

Capturing Camera Images

In addition to signatures, our field engineers use the device's camera to capture images as proof of work. These images could include pictures of delivered packages, equipment installations, or site conditions. Similar to user signatures, these images are saved as files on the device.

Redux Integration for State Management

Redux Architecture

We've seamlessly integrated Redux into our React Native app to manage application state. Redux provides a reliable and predictable data flow, which is essential for maintaining a robust offline/online communication feature. It allows us to keep track of critical app states, ensuring a smooth user experience.

In the context of local data storage and media file handling, Redux helps us manage the state related to tasks, customers, locations, signatures, and images. Changes to these entities are reflected in the Redux store, providing a consistent and accessible source of truth for our application.

Network Connectivity Handling

Real-time Monitoring

Our app actively monitors network connectivity changes through the NetInfo API provided by React Native. We also use the secondary method to validate the network connectivity by Pinging Backend Server, ultimately we need to ensure that our backend server is reachable irrespective of the device network state.

This enables us to subscribe to network status changes and provide users with real-time updates regarding their online/offline status.

Network monitoring is especially crucial in our use case, as field engineers often work in areas with unpredictable network coverage. Being aware of their connectivity status allows them to plan their tasks accordingly.

Event-Driven System

Network events trigger Redux actions within our app, enabling components to respond dynamically to changes in connectivity. This event-driven system ensures that the user interface reflects the most recent data available locally.

For instance, when a user goes offline, the app can display a message indicating the offline status and provide access to locally stored data, including tasks, customer information, and previously captured images and signatures. This ensures that field engineers can continue working even without an active internet connection.

Synchronization Process

The synchronization process is the heart of our offline/online communication feature. It automates the update of locally stored data on the server when a network connection is restored. This process involves several steps:

Checking for Pending Changes

The app checks for any pending changes made by users while offline. This includes updates to tasks, customer data, and any new signatures or images captured.

Sending Pending Changes to the Server

Once a network connection is detected, the app sends these pending changes to the server for processing and updates. For example, if a field engineer completed a task and captured a signature and images while offline, these updates are pushed to the server.

Fetching Updates from the Server

The app also fetches updates from the server to ensure data consistency. This is crucial because while the app was offline, other users or systems may have made changes to the same data. Fetching updates ensures that the local data is up-to-date.

Updating the Local Database and File Storage

Finally, the app updates the local database and file storage with server changes, ensuring that local and remote data, including media files, are synchronized. This means that completed tasks, customer information, and media files captured offline are now reflected in the server's database.

Benefits of Offline/Online Communication

Implementing robust offline/online communication in our React Native app has brought several benefits to our field engineers and the overall efficiency of our operations:

1. Uninterrupted Workflows

Field engineers can continue their tasks even when faced with unreliable network connectivity. They can access task details, customer information, and view captured signatures and images offline. This ensures uninterrupted workflows and reduces downtime caused by network issues.

2. Enhanced Data Integrity

The synchronization process ensures that data remains consistent between the local device and the server. Any changes made offline are eventually reflected in the server's database, maintaining data integrity.

3. Improved User Experience

Real-time monitoring of network connectivity and dynamic UI updates based on online/offline status provide a better user experience. Users are informed and can make informed decisions about when to work offline and when to sync data.

4. Efficient Resource Utilization

By allowing users to work offline and sync later, we optimize resource utilization. Field engineers can focus on their tasks without waiting for network connections, and synchronization can be scheduled during periods of better connectivity.

5. Reduced Frustration

Reliable offline capabilities reduce user frustration. Field engineers no longer need to worry about losing data due to network interruptions, contributing to higher job satisfaction.

Conclusion

In this extended blog post, we've delved deep into the technical aspects of implementing offline/online communication in a React Native app designed for field engineers. We've covered local data storage with react-native-sqlite-storage, local file storage for media files, Redux integration for state management, real-time network connectivity monitoring, and the synchronization process.

While this blog post provides a comprehensive overview, it's essential to adapt these concepts to your specific use case, especially when dealing with complex data schemas and media file management. By leveraging these components effectively, you can provide users with a reliable and seamless experience, even in regions with poor or unreliable network connectivity.

Implementing robust offline capabilities not only enhances user satisfaction but also improves operational efficiency, making it a valuable investment for any mobile application catering to users working in challenging network environments.