Strategies to make a web application available offline?

Question

We're currently building a web app (Django, Ember), and we just found that most of our potential customers require sporadic offline access to the application.

What we need is not just "presenting" the app so user can navigate, caching stuff in the Manifest and so on (which I guess we will need eventually too), but we must let users actually operate as much as possible as if they were online. There will be obviously some features unavailable, but basic usage of the app should be available.

That said, I'd love to hear some thoughts on people that have confronted this scenario before. The way I see this, we need to:

1.- Either check if we're online / offline constantly or let the user specify when they're going offline (sort like Airplane mode in a smartphone).

2.- All data should be dumped into IndexedDB and from that moment on we use IndexedDB for anything related with data.

3.- When the user goes back online, a Synch process must try to dump the data from the offline user to the db online. While this might look dangerous, I don't expect a lot of users going offline at the same time while other online users are using the app, so I expect this synch process to don't become a real nightmare, also I don't expect to have race conditions.

Well, and there is obviously the option to create a Desktop standalone app...but I will try to avoid this as much as possible...

Thanks!

Leicester

To help solve #1, you can add event handlers for the offline and online events. These are fired when the device goes offline and comes back online. – Bufordbug

Which database do you use on your server? – Rawlings

@LouisBarranqueiro PostgreSQL and redis for caching – Leicester

For anyone getting back here, I've found this good resourceful site github.com/pazguille/offline-first, didn't even know there was something called ServiceWorkers... – Leicester

Answer 1

1. To check if the user is offline or online , you can use navigator.onLine but this property is not supported on all browsers. Then, if you target some of this browsers, you will have to implement an other solution with AJAX calls for example.

2. Concerning the synchronisation, you can use available solution like CouchDB (NoSQL) on your server and use PouchDB (indexedDB) in your javascript front-end that will ease you the synchronisation process. If it doesn't meet your expectations, implement your own solution, to synchronize an indexedDB with your server database (MySQL, Postgres, MongoDB, etc...), of course, you can still use pouchDB on the front-end.

3. Regarding performance, I think it will depend greatly on:

   • the number of servers that host your web applications
   • the number of replica of your master database
   • configuration of your servers (CPU and RAM)

Rawlings

THanks for response, I've been reading a lot, looks like ServiceWorker-IndexedDB(PouchDB) and CouchDB seem the way to go. My only concern is how do I sync CouchDB (noSQL) with my PostgreSQL database in server... – Leicester

PouchDB rather you mean no? because couchDB is the database on server. – Rawlings

OH, you want to ue PouchDB with CouchDB and sync CouchDB with PostgreSQL. why not PouchDB and PostgreSQL directly? – Rawlings

Not even sure if that can be done, I'm a total newbie in the offline-first world :D – Leicester

It can be done but you have to implement the adapter. It a lot of works. Of course, the fatest way, is to use PouchDb with CouchDB. Check this how to have complete offline functionality in a web app with postgresql database – Rawlings