Offline Sync Solution for Web Application using ReactJS and Aws AppSync

1. Background
Offline capability and then synchronization for Web or Mobile application provides competitive advantage for business especially for the Application which requires to be worked in environment where network connectivity is an issue. Implementing the solution with Mobile Applications is little easier as there are multiple technologies available which leverages SQLite, CouchDB etc. This blog provides the approach note for implementing the offline sync for Web Application.
2. Challenges for Offline Sync solution with Web Applications
Download data to local storage: Downloading the data for local storage and make it available for the browser to use the data and update and retrieve the updated data locally.
  • Synchronization Cycle and time: If you have intermittent internet connection, handling the synchronization with the backend services will be big challenge in terms of data consistency and updates
  • Managing the changes in the local storage: If the data is downloaded for offline processing, how do we manage the data which is getting changed by other user or by other processes.
  • Method of Synchronization: Should the synchronization be done synchronously vs asynchronously, manually vs automatic
Solution Approach:
3.1 Front-end side solution components:

a. Local storage in browser:

ServiceWorkers: It is the technology that enables Web Application to use many Progressive Web App features, such as offline, add to home screen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their home screen, which can lead to higher engagement. ServiceWorkers have a well-determined lifecycle. Google has created two great libraries – sw-precache and sw-toolbox – for caching static and dynamic content. These libraries are good for implementing offline strategies.

b. AWS AppSync Client:

The location where GraphQL operations are defined. The client performs appropriate authorization wrapping of request statements before submitting to the GraphQL proxy. Responses are persisted in an offline store and mutations are made in a write-through pattern. The client to invoke the AWS AppSync service, we import the following libraries and will provide the client functionality.
  • import { Rehydrated } from ‘aws-appsync-react’;
  • import { ApolloProvider } from ‘react-apollo’;
  • import Client from ‘aws-appsync’;
  • import { graphql, compose } from ‘react-apollo’;
3.2 Server side Solution Components:

a. AWS AppSync

AWS AppSync is a managed serverless GraphQL service that simplifies application development by letting you create a flexible API to securely access, manipulate, and combine data from one or more data sources with a single network call. With AppSync, developers can build scalable applications on a range of data sources, including Amazon DynamoDB NoSQL tables, Amazon Aurora Serverless relational databases, Amazon Elasticsearch clusters, HTTP APIs, and serverless functions powered by AWS Lambda.

b. GraphQL Proxy

A component that runs the GraphQL engine for processing requests and mapping them to logical functions for data operations or triggers. The data resolution process performs a batching process (called the Data Loader) to your data sources. This component also manages conflict detection and resolution strategies.

c. Operation

AWS AppSync supports the three GraphQL operations: query (read-only fetch), mutation (write followed by a fetch), and subscription (long-lived requests that receive data in response to events).

d. Resolver

A function that converts the GraphQL payload to the underlying storage system protocol and executes if the caller is authorized to invoke it. Resolvers are comprised of request and response mapping templates, which contain transformation and execution logic.  
4. Conclusion & Considerations
  • Identify the data that needs to be downloaded and store locally. Select as little data as possible to transfer data from server to browser.
  • Set a trigger or download event to download and also initiate the sync when network is available.
  • Send offline status and sync notification notice to user.

More Blogs

Demystifying Vector Databases: Unleashing the Power of High-Dimensional Data

A vector data store is a specialized database designed to store high-dimensional embedding representations of diverse data types, including audio, video, images, text, and more. One of its core functionalities is the ability to efficiently search for vectors within the store that closely resemble a given query vector.
Vector stores streamline the process of storing embeddings and conducting similarity searches among these vectors, simplifying the management and retrieval of high-dimensional data representations.

Read more

Enhancing Customer Experience with GenAI Applications

In this blog, we will explore the creation of GenAI applications that significantly enhance the customer experience by leveraging OpenAI’s Large Language Models (LLMs) through their APIs, as well as key AWS services like Amazon Kendra, AWS Transcribe, and AWS Polly. Additionally, we’ll discuss the pivotal role of AWS S3 and In-Memory Cache for storing indexed data, chat history, and serving the GenAI application’s various functions

Read more

Evolution of Application Integration and API First Approach

Over time, the landscape of application integration has undergone significant changes. We’ve moved from integration within Mainframes to traditional file-based communication to more advanced methods.

In the ever-evolving digital landscape, APIs (Application Programming Interfaces) have become a crucial component in various domains, including e-commerce, banking, social platforms, and enterprise applications, enabling seamless communication between software components and services.

Read more
Contact us

Partner with us for Comprehensive IT

We’re happy to answer any questions you may have and help you determine which of our services best fit your needs.

Your benefits:
What happens next?

We Schedule a call at your convenience 


We do a discovery and consulting meeting 


We prepare a proposal 

Schedule Consultation