The silver bullet for building offline-first web apps is CouchDB. If you read my previous article about offline first, I mentioned 2 major considerations for offline-first thinking, "persistence" and "syncing", CouchDB provides you with both out of the box.

As Ryan Meredith goes ahead to say in a CouchDB User Study:

Even if the internet was very bad our databases in the two locations would eventually sync

Personally, my love for CouchDB knows no limits, from the mere fact that I can deploy a full application without writing an API since CouchDB ships with an HTTP API, to knowing my app never has downtime. There was an incident from my former startup where we had a billing issue with our server, we didn't realize on time and our server was down for nearly 48hours but none of our clients was affected and still had a seamless experience. At another time, we were moving over 1GB of customer data seamlessly every day.

My background has a lot to do with my appreciation of this technology. I worked at a startup in 2016 and was tasked with building a mobile app that works offline. Specifically, a micro-eCommerce app that falls back to use SMS and USSD technology on the background if the internet wasn't available. Caching the product inventory was a headache. Just like a famous quote any CS student or programmer would probably know:

There are only two hard things in Computer Science: cache invalidation and naming things

You might not understand the full complexity of syncing, caching and persistence unless you've had to spend hours writing code that isn't perfect. Imagine accidentally overwriting data and not getting to find out until probably 3 weeks later or never 😩.

To efficiently use CouchDB for offline apps, you have to summon its twin PouchDB, the difference: CouchDB works in the cloud, PouchDB works in your pocket (on your phone, PC or any device), and with CouchDB's replication protocol, both of these databases would begin to function as one, update one node and all others are updated seamlessly like magic 🤪.

Setting it up is pretty simple

1. Download the latest CouchDB from couchdb.apache.org or install via terminal following instructions here that match your operating system.
2. If in a live environment, you would want to use Nginx for reverse proxy as found here and set up with a domain e.g couch.example.com
3. Install PouchDB in your javascript app from the npm package directory
4. Import and initialize PouchDB

// with commonjs
const PouchDB = require('pouchdb')

// or with es6
import PouchDB from 'pouchdb'

// create a local database instance and sync
db = PouchDB('offline-data-store')
db.sync('https://couch.example.com/online-data-store')