Building Offline-First PWAs: Key Lessons

The Problem

Both GaragePRO (garage management) and PontajPRO (timekeeping) are used by people who don't always have reliable internet - mechanics in underground garages, hotel staff in basements, warehouse workers in rural areas.

If the app doesn't work offline, it doesn't work at all.

Strategy 1: Firestore Persistent Cache

Firebase Firestore has a built-in persistent cache that stores documents locally. When you enable it, reads come from cache first and sync when online.

typescriptconst db = initializeFirestore(app, {
  localCache: persistentLocalCache({
    tabManager: persistentMultipleTabManager()
  })
});

This gives you offline reads for free. But writes are trickier.

Strategy 2: Optimistic UI Updates

When a mechanic logs a job update offline, I update the UI immediately and queue the write for when connectivity returns. Firestore handles this automatically - but you need to design your UI to show sync status.

I added a small indicator: green dot = synced, yellow dot = pending, red dot = error. Users understand this intuitively.

Strategy 3: Service Worker for Shell Caching

The app shell (HTML, CSS, JS bundles) is cached by the service worker on first visit. Subsequent loads are instant, even offline. I use Workbox for this because manually managing cache strategies is error-prone.

What I'd Do Differently

If I were starting today, I'd design the data model for offline-first from day one. In GaragePRO, I retrofitted offline support and had to restructure several Firestore queries that assumed real-time connectivity. In PontajPRO, I planned for it upfront and the implementation was 3x faster.

The Takeaway

Offline-first isn't a feature you bolt on - it's an architecture decision that affects your data model, your UI patterns, and your sync strategy. Plan for it from the start, or plan to rewrite later.

---

*Need an offline-first PWA for your business? View PWA services or start a conversation.*