How difficult is to create an offline-first app?

[frederikhors]

I only discovered this project today.

Congratulations for this great job!

In your opinion, how difficult is it to create an offline-first Web/Desktop/Native application with this project?

Anything that respects these rules?

[sergiodxa]

You could create a fetcher that read from IndexedDB or WebStorage and if the data it's not there read from an API. Then use that fetcher function in SWR and it should work automatically.

For mutating, you will need to see how to mutate locally first, update SWR cache (or trigger a revalidation) with mutate and also mutate in the API or keep a queue of pending updates in case you are offline. Another option is to disable actions that trigger a mutation if the user is offline, this way it can read (with useSWR) but can't mutate and you don't need to think how to solve conflicts and things like that.

[frederikhors]

We are evaluating many projects because we want to build a CRM-like that must have all the data and a 100% offline CRUD with synchronization once online.

I cannot understand if we can achieve this with your project.

Some of the questions in the article:

1. Are conflicts handled? How?

2. How much data does the client need to store to fully replicate (full offline data access & editing)?

3. Does it require all data to live in memory, or can it work with mostly-persisted data? (such that large datasets are usable)

4. Does it correctly handle working on multiple tabs in the same browser session?

Plus I need to know:

1. Do I receive the changes of others in real-time as soon as they are performed on the other devices?

2. Is the queue of failed requests (because the server is not responding or because I'm offline) persisted so that it stays in the browser even if I close it momentarily?

3. Does it auto-retry if some request is failed?

[sergiodxa]

SWR doesn't know how to handle your data. It does nothing specific for offline apps. That is something you need to do in your fetcher function as I mentioned in my other comment.

What SWR does for you is to keep a in-memory cache (not that in-memory means it will disappear if the user reload or close and open again the app) so React can get the cached data immediately and render your components faster, while it ensure it's up-to-date in the background.

You will need to solve most of the requirements for offline-apps yourself in your fetcher, or using another third-party lib.