3

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:

1

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

The diagram is similar to the one in the question: pouch-db-sync-

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.

| improve this answer | |
0

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.

| improve this answer | |
0

Redux-persist. You can use several storage backends:

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

PouchDB is one of them.

| improve this answer | |
0

Offix: offline GraphQL Client and Server

https://github.com/aerogear/offix

| improve this answer | |
  • Aw, guettli, you should know about our answer guidelines – how does it meet the requirements, what makes it recommendable, etc. I trust you will edit your post accordingly, so I'm not converting it to a comment now. Please leave another comment when done, so I clean up the, aw, comments ;) Thanks! – Izzy Oct 20 at 15:14
0

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.