Offline Mode

The ability of an app or website to remain functional when there is no internet connection.

Category: Mobile Development (also: Web Development, UX)

Author: Atomic Glue Editorial Team

## Definition

Offline Mode is a feature that allows an application to maintain core functionality without network access. It works by caching data, assets, and application logic on the device so users can continue reading, composing, or interacting even when connectivity drops. When the connection returns, the app syncs changes in the background. Offline mode is a key differentiator between mediocre and great mobile experiences, especially in areas with unreliable connectivity.

## Caching Strategies

There are several caching strategies for offline support. **Cache First**: Serve from cache, fall back to network. Best for static assets. **Network First**: Try the network, fall back to cache. Best for frequently updated content. **Stale While Revalidate**: Serve cached content immediately, then fetch an update in the background. Best for news feeds and lists. **Cache Only**: Never hit the network. Best for static app shell resources. Choose the strategy based on how fresh the data needs to be.

## Service Workers for PWAs

Service workers are the foundation of offline mode for web applications. They intercept fetch events, implement caching strategies, and manage background sync. The Cache Storage API lets you pre-cache app shell resources during installation and dynamically cache content as users navigate. Service workers can also show custom offline pages instead of the browser's generic error page.

## Native App Offline Patterns

Native apps use local databases (SQLite, Room on Android, Core Data on iOS) to persist data. The repository pattern abstracts data sources: the app reads from the local database immediately, attempts a network sync in the background, and updates the UI when fresh data arrives. Popular libraries like Firebase Firestore provide built-in offline persistence with automatic conflict resolution.

## In code

// Service Worker: Cache-First Strategy
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cachedResponse) => {
        // Return cached response if available
        if (cachedResponse) {
          return cachedResponse;
        }
        // Otherwise fetch from network and cache
        return fetch(event.request).then((response) => {
          return caches.open('v1').then((cache) => {
            cache.put(event.request, response.clone());
            return response;
          });
        });
      })
  );
});

## Common questions

Q: Does offline mode work for all types of apps?

A: Most apps can benefit from some level of offline support. Highly real-time apps (video calls, live collaboration) have the hardest time, but even those can cache UI shells and settings.

Q: How much data should I cache for offline use?

A: As much as your users need, but be mindful of storage limits. Browsers typically allow tens to hundreds of MB. Mobile OS limits vary. Cache aggressively for core functionality, conservatively for media.

## Key takeaways

• Offline mode keeps your app usable without an internet connection.
• Service workers enable offline support for web apps and PWAs.
• Choose caching strategies based on data freshness requirements.
• Native apps use local databases with background sync.
• Good offline support significantly improves user retention in low-connectivity areas.

## Related entries

• [Progressive Web App (PWA)](atomicglue.co/glossary/progressive-web-app-pwa-front-end)
• [Mobile Performance](atomicglue.co/glossary/mobile-performance)

Last updated June 2025. Permalink: atomicglue.co/glossary/offline-mode