Offline-first webapp local storage sync to MySQL

Question

I'm developing an offline-first webapp (HTML5 & JS) for data collecting which should sync to a MySQL server when online. I also need to get a subset from the MySQL DB to search in offline (selecting categories/attributes for the data collecting).

To summarize things:

1. Get categories from MySQL and store in queryable client-side db
2. Collect data and store in client-side db
3. When online sync data to MySQL (via a PHP script preferrably)

I've looked into PouchDB but I don't think it is the right solution because the server side applications all depend on MySQL and it's not an option to rewrite all.

What solution would you suggest?

Answer 1

Let's say you are having JS blogging app with Redux (for example) on top.

Your Data Layer (Redux) persists data into LocalStorage and vice-versa, when app is loaded it checks LocalStorage and if there are data - data loaded into Redux.

Your Redux contains Posts and NewPosts .

When app is online, you send requests to the server, server responds with some data, you store this data into the Posts .

When app is offline you don't send any requests, you just store new posts into the NewPosts .

When your app is back online - you send every item from NewPosts to the server, and if they are successfully stored - remove them from NewPosts and update Posts with new stuff.

In the application you are rendering NewPosts first (probably with not synced icon or something) then Posts after.

Hopefully I understood your question correctly.