DEV Community

Magne for Playful Programming

Posted on Edited on

Local-First vs. Offline-First vs. Offline-Second vs. Online

The terms "offline-first" and "local-first" have become more established and distinct concepts in the developer community for referring to various classes of apps, since my original Reddit post in 2023 where I introduced the concept of "offline-second" to clear up some misclassifications. Since there is still frequent cross-talk (mixing of terms) on this topic, I've included the clearest current definitions here, sorted from their most-to-least requirement for internet/server access:

  • Online / Cloud apps (always requires internet/server access to be used). Most webapps.

  • Offline-Second apps (Cloud-First + Local Cache + Queued writes):
    The app is built assuming it will most frequently be used with an internet connection. Developers add caching layers (like Service Workers, IndexedDB, or local SQLite) after the core features are built so the app does not crash when the network drops. It usually supports viewing cached data and queuing basic actions/writes until a connection returns.
    The offline safety net allows using the local cache when the app is offline temporarily (for various stretches of time*). I introduced this concept in this post in 2023, to distinguish powerful (GraphQL) caching solutions from those solutions which use a local DB that syncs. The local cache can be in the client's memory/RAM, but ideally it should be persisted to the client's disk (to never lose user data, when the browser/OS reclaims memory like iOS does aggressively when the user switches between apps, or if the user comes back after the cache timer has expired).

  • Offline-First apps (Local Storage + Server Sync):
    The application reads from and writes to a local database on the device first, treating the absence of an internet connection as a normal state rather than an error. The local DB could reside only in memory/RAM, but most often it resides on disk storage. A background sync engine pushes local changes to a central cloud database whenever a connection is available. While it survives outages seamlessly, the cloud server remains the ultimate authority on data: Cloud is still the boss.

  • Local-First apps (User-Owned Data + Optional Server/Peer Sync):
    Your data lives permanently on your hardware, and the cloud is just a silent backup and sync helper. If the company's servers shut down, your app and files still work forever (since your device owns the primary data; privacy): Your device is the boss. (Variants of local-first exist where you could sync your local data with peers, P2P).

* Remember that a longer time offline increases risk of data conflicts on the server/peers if data is merged with other user's overlapping work.

Note: a PWA is just a delivery wrapper, so you can build it using any of the three non-online approaches depending on how you design your data layer. But most PWAs are Offline-Second apps since when a PWA already uses a Service Worker to cache the static HTML/CSS/JS assets, it is natural to start by just cache data / API responses as well. Most developers then find they don't need an even higher level of offline capability for their app, given that in the civilised world internet access is so pervasive).

Top comments (0)