During testing I discovered that if I loose the internet connection and keep adding “things” into the DB, I don`t get any warnings that Im offline, and the data will show up in my app as if I was online and it was stored. When I get back online, I verify that im actually online, and thereafter close the web app. I find that the data is then NOT relayed back to server upon reconnecting to the internet, so I lose all that data.
My focus with this post is to solve the issue at hand and also gain the added benefit of having a mobile/web app that can be used intermittently offline.
So the main question is: How can we cache these requests and defer them for later retry in a best way possible?
I have some suggestions, first let me define requirements as per my view then some technical-implementation-suggestions.
The critical requirements should be:
- Warning when offline
- Caching all attempted requests when offline. Show warning until requests performed with 200 OK/valid response.
- Warning when trying to log-out or close browser window, and when unsaved data.
- Local storage of the cached requests even though you close browser window
Most of these can be done with Offline.js http://github.hubspot.com/offline/docs/welcome/ + some simple custom JS.
Not critical but beneficial added-value requirements:
5. Caching parts of app-data locally so you can READ access data when offline (for example a products database in a barcode scanner app) - In this case it should always try HTTP requests first IF online - ELSE it falls back to cache. We should also show a topbar or bottombar with warning, you are now viewing cached data from date-hour XX-XX-XX this data will resync when you get online again. (This may be hard to implement if you do lots of serverside filtering or data manipulation but with simple requests it should be quite possible)
When trying to sync changes AND there is conflicting changes, that were saved on server after your saved request. ( How to implement: Need to have extra field in cached requests local datastore which contains date+time UTC + username. WHEN offline BEFORE syncing, DO a READ request to each API endpoint FOR EACH CHANGE in local browserDB and compare the cached-request-date with the remote last-saved-data-date for every single item )
You could then display a popup or list of last changed by USERNAME and click to choose keep your change or the newer change on server.
Possibility to delete all cached requests (Delete dialogue with confirmation)
To use some standardized localDB-approach that also can live on a cordova app and iOS safari. (Localforage?)
By handling this Bubble will reduce the amount of lost data for users that intermittently are offline (even just a minute offline will make sure a user looses data).
Additionally bubble can position itself stronger as a platform for Hybrid apps and Desktop-wrapped applications. (Offline handling being an important factor here)
Love to hear what you think @emmanuel & co.