Offline persistence in Firebase - Step-by-Step Execution

Process Flow - Offline persistence

App starts

↓

Enable offline persistence

↓

User reads/writes data

↓

Check network status

↓

Sync with

↓

server DB

↓

Update UI

↓

When back online

↓

Sync local changes

↓

Update server DB and UI

This flow shows how enabling offline persistence lets the app store data locally when offline and sync with the server when back online.

Execution Sample

Firebase

firebase.firestore().enablePersistence()
  .then(() => {
    // Offline persistence enabled
    const docRef = firebase.firestore().collection('users').doc('user1');
    docRef.set({name: 'Alice'});
  })
  .catch(err => console.error(err));

This code enables offline persistence and writes data to Firestore, which will be stored locally if offline.

Process Table

Step	Action	Network Status	Data Storage	UI Update
1	App starts and enables offline persistence	Online	Persistence enabled locally	No change
2	Write data to 'users/user1'	Online	Data sent to server DB	UI shows new data
3	Network goes offline	Offline	App detects offline	UI remains responsive
4	Write data to 'users/user1' while offline	Offline	Data stored locally	UI shows new data immediately
5	Network comes back online	Online	Local changes synced to server DB	UI confirms data synced
6	App continues normal operation	Online	Data synced and persisted	UI updated with latest data

💡 Execution stops as app runs normally with offline persistence enabled and data synced.

Status Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	Final
Network Status	Online	Online	Offline	Online	Online
Data Storage	Empty	Server DB updated	Local cache updated	Server DB synced	Server DB updated
UI State	Initial	Shows new data	Shows new data	Shows synced data	Shows latest data

Key Moments - 3 Insights

Why does the UI update immediately even when offline?

Because data is stored locally first (see Step 4 in execution_table), the UI can show changes instantly without waiting for the server.

What happens to data written offline before reconnecting?

It is saved locally and synced to the server once online again (see Step 5), ensuring no data loss.

How does the app know when to sync local changes?

The app listens for network status changes and triggers sync when it detects the network is back online (Step 5).

Visual Quiz - 3 Questions

Look at the execution_table, what is the network status when data is stored locally?

A Offline

B Online

C Unknown

D Connecting

💡 Hint

Check Step 4 in the execution_table under 'Network Status'

At which step does the app sync local changes to the server?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Look at the 'Data Storage' column in execution_table for syncing action

If offline persistence was not enabled, what would happen when writing data offline?

A Data synced immediately

B Data stored locally anyway

C Data would be lost or error thrown

D UI updates instantly

💡 Hint

Refer to Step 1 and Step 4 about enabling persistence and storing data locally

Concept Snapshot

Offline persistence in Firebase Firestore:
- Enable with firebase.firestore().enablePersistence()
- Stores data locally when offline
- UI updates immediately with local data
- Syncs local changes to server when back online
- Prevents data loss and keeps app responsive

Full Transcript

Offline persistence in Firebase Firestore allows apps to keep working even without internet. When enabled, data writes are saved locally first, so the user sees immediate updates. The app detects network status changes and syncs local data to the server once online again. This ensures no data is lost and the app stays responsive. The flow starts with enabling persistence, then writing data online or offline, storing locally if offline, and syncing when back online.