Architecting web apps to just work offline

Offline web applications with native performance are no longer a myth. Islam Sharabash explains how to architect an application that loads offline, persists data to disk, and even resolves conflicts in data and shares the challenges he encountered, including managing optimistic updates, syncing, and performance on a single thread, and the solutions that worked best.

Modern browser technologies now make it possible to ship completely offline web applications with native-like performance. However, actually building such an application is a different story. Superhuman recently built an offline-first email client in the browser, using open source libraries to help manage the problems the team faced. Drawing on this experience, Islam Sharabash explains how to architect an application that loads offline, persists data to disk, and even resolves conflicts in data and shares the challenges he encountered, including managing optimistic updates, syncing, and performance on a single thread, and the solutions that worked best. Along the way, Islam covers the basics of how to load code offline using service workers and how to store data locally using IndexedDB and CacheStorage. (Even the venerable localStorage gets a mention.) Islam then digs into the “syncing” problem—the Achilles’ heel of offline apps. How do you ensure that you don’t lose any of the user’s work and that the world ends up in an expected state on reconnection? How do you deal with partial connectivity in a world where more and more people are using laptops tethered to mobile networks? A few existing solutions, like PouchDB and Firebase, can help. Islam shows you how to model updates as streams that can be played forward or backward and the techniques Superhuman uses to ensure that offline code always knows “which changes haven’t been applied yet” and what the previous state of the world on the server was.