I have a react app that use apollo as a grapql client. The app now need offline support for a subset/subapp. There is a service worker (thanks to workbox and webpack) that do the pre-caching of the assets of the app and works good. Now there is a need to add support for the data. The app need to works in offline mode like is online. That means, the user should be able to see al the data and perform a few mutations, that will need to sync back when the app gets online again.
I have the following approaches as possible solutions:
* Use a service worker:
Add a button that trigger a set of queries to retrieve all the required data for the offline work.
Use the service worker (workbox runtimeCaching) to cache all the responses for these queries.
When the app goes offline, the service worker will "serve" the response of the queries so the app will work "as if its online", performing the queries as normal with the service worker acting as a "proxy".
Set an "optimistic ui" approach for the mutations and use workbox backgroundSync to sync the changes (basically send the mutation action back to the endpoint when the browser get's online again).
* Use some apollo native approach (like apollo-cache-persist) to store the queries cache in localStorage. Trigger all the required queries for the app, persist that cache, rehydrate the app from the cache in further loads if the app is not online.
What would be a better and simple approach for an offline web app=