Offline-capable product explainer (PWA)

Built for rooms with bad wifi

A global technology manufacturer's sales teams needed an interactive tool for explaining a complex solutions portfolio in the field: at events, in client meetings, on stands. The defining constraint was connectivity. Venue wifi is unreliable exactly when it matters, and a sales tool that shows a spinner mid-pitch is worse than a printed PDF. The brief was an application that loads instantly, works with no connection at all, and still feels polished enough to represent an enterprise brand. I built it solo, from architecture to test suite.

A PWA where offline is the architecture

I built it as a progressive web app with Nuxt, using Vite's PWA tooling to precache the application shell and content with a service worker. After the first visit, the entire tool runs from the device: no request leaves it, so there is nothing for a flaky network to break. Application state is handled with Pinia and persisted locally, so a rep's position in the tool survives a closed tab or a dead connection. Offline capability was the starting assumption rather than an enhancement, which is the only way it actually works: retrofitting offline onto an app that assumes a network tends to produce something that half-works, which in front of a customer means it doesn't work.

Making the assets earn their bytes

An offline product tool is heavy by nature: it carries product imagery for an entire portfolio. I built an image optimisation pipeline into the project so every asset ships at appropriate sizes and formats, keeping the initial download and the cached footprint reasonable. Presentation mattered too, since this is a tool someone stands next to; transitions and interactions are animated with GSAP so it reads as a designed product rather than a web page in a wrapper.

Verifying what you can't demo

Offline behaviour is easy to claim and awkward to verify by hand, so the project carries two layers of automated testing: Vitest for unit-level logic and Playwright for end-to-end flows in a real browser. That combination meant changes could ship without someone manually toggling airplane mode and clicking through the whole tool, which matters on a project where the failure mode is invisible until someone is standing in front of a customer. What shipped is a tool that sales teams can open anywhere and trust: it loads from the device, remembers where you were, and its riskiest behaviours are pinned down by tests rather than hope.