Offline persistence in Firebase - Mini Project: Build & Apply

Enable Offline Persistence in Firebase

📖 Scenario: You are building a mobile app that needs to work even when the user loses internet connection. To do this, you want to enable offline data persistence using Firebase.

🎯 Goal: Enable offline persistence in Firebase so the app can store data locally and sync when back online.

📋 What You'll Learn

Create a Firebase app instance

Configure Firebase Firestore to enable offline persistence

Verify persistence is enabled in the configuration

Add a final confirmation line to complete the setup

💡 Why This Matters

🌍 Real World

Offline persistence allows apps to work smoothly without internet, storing data locally and syncing later.

💼 Career

Many cloud and mobile developer roles require knowledge of offline data handling with Firebase or similar services.

1

Create Firebase app instance

Create a constant called app and initialize it with initializeApp(firebaseConfig).

Firebase

// Your code here

Need a hint?

Use initializeApp with your firebaseConfig to create the app instance.

2

Create Firestore instance

Create a constant called db and initialize it with getFirestore(app).

Firebase

const app = initializeApp(firebaseConfig);
// Your code here

Need a hint?

Use getFirestore passing the app instance to create the Firestore database object.

3

Enable offline persistence

Call enableIndexedDbPersistence(db) to enable offline persistence for Firestore.

Firebase

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// Your code here

Need a hint?

Use enableIndexedDbPersistence with the db object to turn on offline support.

4

Confirm persistence setup

Add a .catch() block after enableIndexedDbPersistence(db) to handle errors with a function that takes err as parameter.

Firebase

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
enableIndexedDbPersistence(db)
// Your code here

Need a hint?

Use a .catch() block to handle errors from enableIndexedDbPersistence and check err.code for known issues.