The Reality of Connectivity in West Africa

Mobile data in Ghana is widely available but inconsistent - especially in schools and rural hospitals. When I built the NHIA (National Health Insurance Authority) portal, I quickly learned that "works offline" is a feature, not a nice-to-have.

Service Worker Basics

A Service Worker is a JavaScript file that runs in the background, intercepting network requests and serving cached responses when offline.

// sw.js - register in your main JS
if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js");
}

// sw.js - cache critical assets on install
const CACHE = "app-v1";
const PRECACHE = ["/", "/styles.css", "/app.js", "/offline.html"];

self.addEventListener("install", event => {
    event.waitUntil(
        caches.open(CACHE).then(cache => cache.addAll(PRECACHE))
    );
});

self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request).then(cached => {
            return cached || fetch(event.request).catch(() =>
                caches.match("/offline.html")
            );
        })
    );
});

IndexedDB for Offline Data

For form submissions that happen offline, queue them in IndexedDB and sync when the connection returns:

async function submitForm(data) {
    if (!navigator.onLine) {
        await queueToIndexedDB("pendingSubmissions", data);
        showToast("Saved offline - will sync when connected.");
        return;
    }
    await fetch("/api/submit/", { method: "POST", body: JSON.stringify(data) });
}

window.addEventListener("online", syncPendingSubmissions);

Results on the NHIA Portal

After implementing offline support: