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

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.