Offline-First Field Data PWA: Resilient Sync, MapLibre & Supabase RLS

Designing an industrial-grade progressive web application for remote agricultural and civil inspectors operating completely disconnected from cellular infrastructure.

100%

Zero-Connectivity Operable

< 85%

Payload Size Reduction

PostgreSQL

Supabase + Strict RLS

MapLibre

Vector Tile Offline Cache

The Operational Challenge

Field engineers and inspectors conducting environmental audits frequently work in remote rural zones with zero 3G/4G coverage. Standard web applications constantly fail on network timeouts, discarding complex multipoint polygon surveys and high-resolution audit photographs. As Lead Full-Stack Architect, I engineered a true offline-first Progressive Web App.

Next.js PWA Dexie.js (IndexedDB) ServiceWorkers MapLibre GL JS Client Web Workers Supabase (PostgreSQL RLS)

Technical Complexities Solved

Multi-Megabyte Image Payloads: Inspectors capture 12-megapixel site photos. Uploading 100 raw images when reconnecting in town saturated cellular modems and failed HTTP requests.
Vector Map Rendering Offline: Interactive GIS mapping requires satellite imagery and boundary KML polygons even when completely severed from map server APIs.
Two-Way Synchronization Conflicts: Different team members inspecting the same territorial sector simultaneously required deterministic, timestamped merge rules without data loss.

Two-Way Offline Sync & Storage Topology

[User Interaction: Field Survey + Photos + Polygon KML] │ [Client Web Worker (OffscreenCanvas)] ├── Bilinear photo downsampling & WebP compression (10MB ➔ 450KB) └── EXIF metadata extraction (Hardware GPS & Azimuth) │ [Dexie.js / IndexedDB Transaction Store] ├── Outbox Queue (Ordered Mutation Logs) └── Pre-cached MapLibre Vector Tiles (MBTiles schema) │ ▼ (Browser Online Event Trigger) [Custom Sync Orchestrator] ├── Delta-timestamp conflict resolver (Last-Write-Wins with audit branch) └── Resumable chunked upload to Supabase Storage Vault │ [Supabase PostgreSQL Backend] ──> Granular Row-Level Security (RLS)

Supabase Row-Level Security (RLS) Isolation

Because multiple contractor organizations used the platform, data isolation was enforced at the database level using PostgreSQL Row-Level Security (RLS). Even if an offline client altered query params during sync reconciliation, Supabase evaluated auth.uid() policies directly within Postgres, preventing cross-tenant data leakage.

Production Impact

Client-side image compression cut sync payload sizes by over 85%, allowing field crews to sync hundreds of audit records in under 30 seconds upon returning to base. The application achieved near-zero data loss reports across thousands of remote audit missions.

Building an offline-first or data-intensive web app?

I design resilient sync engines and offline client architectures that work under hostile network conditions.

Discuss Your Project View All Case Studies