DB and offline sync which works in browser

Question

I want to build a web app which should work offline.

+----------------+                +---------------+
|  Browser       |                |  Server       |
|                |                |               |
|   +---------+  |                |               |
|   |         |  |                |               |
|   |  GUI    |  |                |               |
|   |         |  |                |               |
|   |         |  |                |  +----------+ |
|   +---------+  |                |  |   DB     | |
|       |        |                |  |          | |
|       |        |                |  |          | |
|   +---------+  |                |  |          | |
|   |   DB    |  |    Internet    |  |          | |
|   |         |  | -------------- |  |          | |
|   |         |  |      https     |  |          | |
|   +---------+  |                |  +----------+ |
+----------------+                +---------------+

I am searching for a framework which works in modern browsers and which can be provide a persistent data storage, even if the device is offline.

Required features:

• persistent local storage
• automatically syncing between DB in browser and on server side
• open source
• Should work at least in one browser (chrome only is enough)
• no plugins should be required in the browser

Related:

• Progressive web application
• Conflict-free replicated data type

Answer 1

PouchDB has a sync feature: https://pouchdb.com/guides/replication.html

The diagram is similar to the one in the question:

The PouchDB is a Javascript implementation of CouchDB which is API compatible with it. So you can use CouchDB on the server side and Pouch in the application itself and once the application comes online you can sync both. This is especially useful for progressive web applications who rely on an offline first approach.

PouchDB provides a fully asynchronous API. This ensures that when you talk to PouchDB, the UI doesn't stutter, because the DOM is not being blocked by database operations.

Answer 2

React Query:

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.

Answer 3

Redux-persist. You can use several storage backends:

https://github.com/rt2zz/redux-persist

PouchDB is one of them.

Answer 4

Kinto.js

An Offline-First JavaScript client for Kinto.

Note: If you're looking for a pure HTTP js client for Kinto, check out kinto-http.js.

The idea is to persist data locally in the browser by default, then synchronizing them with the server explicitly when connectivity is guaranteed.

There is a comparison of Kinto, pouchdb and other solutions: Comparison

Answer 5

Offix: offline GraphQL Client and Server

https://github.com/aerogear/offix

Offix extends Apollo GraphQL for building fully featured offline experiences.

Features:

Offline support.

Mutations are persisted when Offline.

Offline Listeners and workflows for seamless UI.

Flexible, out of the box Conflict Resolution implementations Subscriptions and Binary

Upload that works offline.

Multi platform support.

Works with Web, Cordova, Capacitor and React Native.

Framework agnostic (works with React, Angular and Vue) Works with Apollo GraphQL Server and Prisma (Yoga)