Offline persistence in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable offline persistence in Firebase Firestore.

Firebase

firebase.firestore().[1]();

Drag options to blanks, or click blank then click option'

AenablePersistence

BdisablePersistence

CstartPersistence

DsetPersistence

Attempts:

3 left

💡 Hint

Common Mistakes

Using disablePersistence instead of enablePersistence

Trying to call a non-existent method like startPersistence

Calling enablePersistence() activates offline data persistence in Firestore.

2fill in blank

medium

Complete the code to catch errors when enabling offline persistence.

Firebase

firebase.firestore().enablePersistence().catch(function([1]) {
  if ([1].code == 'failed-precondition') {
    console.log('Multiple tabs open, persistence failed.');
  }
});

Drag options to blanks, or click blank then click option'

Ae

Berr

Cerror

Dexception

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not matching the catch parameter

Leaving the parameter blank

The error object is commonly named error in the catch function.

3fill in blank

hard

Fix the error in the code to enable offline persistence with multi-tab support.

Firebase

firebase.firestore().enablePersistence([1]: true});

Drag options to blanks, or click blank then click option'

AenableMultiTab

BsyncTabs

CmultiTab

DsynchronizeTabs

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect option names like syncTabs or multiTab

Missing the curly braces around the option

The correct option to enable multi-tab synchronization is synchronizeTabs.

4fill in blank

hard

Fill both blanks to handle the 'unimplemented' error when enabling persistence.

Firebase

firebase.firestore().enablePersistence().catch(function(error) {
  if (error.code === [1]) {
    console.log('Persistence is not available in this browser.');
  }
  else if (error.code === [2]) {
    console.log('Multiple tabs open, persistence failed.');
  }
});

Drag options to blanks, or click blank then click option'

A'unimplemented'

B'failed-precondition'

C'permission-denied'

D'network-error'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up error codes

Using unrelated error codes like 'permission-denied'

The 'unimplemented' code means persistence is not supported. 'failed-precondition' means multiple tabs conflict.

5fill in blank

hard

Fill all three blanks to initialize Firestore with offline persistence and multi-tab synchronization.

Firebase

const db = firebase.firestore();
db.[1]([2]: true).catch(function(error) {
  if (error.code === [3]) {
    console.log('Persistence failed due to multiple tabs.');
  }
});

Drag options to blanks, or click blank then click option'

AenablePersistence

BsynchronizeTabs

C'failed-precondition'

DdisablePersistence

Attempts:

3 left

💡 Hint

Common Mistakes

Using disablePersistence instead of enablePersistence

Wrong option name for multi-tab sync

Incorrect error code in catch block

Use enablePersistence with synchronizeTabs: true to enable offline support across tabs. The error code 'failed-precondition' indicates multiple tabs conflict.

Practice

1. What is the main purpose of enabling offline persistence in Firebase Firestore?

easy

A. To speed up internet connection

B. To save data locally so the app works without internet

C. To encrypt data on the server

D. To backup data to another cloud service

Solution

1. Step 1: Understand offline persistence concept

   Offline persistence allows the app to store data locally on the device.

2. Step 2: Identify the benefit

   This local storage lets the app work even when there is no internet connection.

3. Final Answer:

   To save data locally so the app works without internet -> Option B

4. Quick Check:

   Offline persistence = local data storage for offline use [OK]

Hint: Offline persistence means local data storage for offline use [OK]

Common Mistakes:

• Thinking it speeds up internet
• Confusing with data encryption
• Assuming it backs up to another cloud

2. Which Firebase Firestore method correctly enables offline persistence in a web app?

easy

A. firebase.firestore().enablePersistence()

B. firebase.firestore().startPersistence()

C. firebase.firestore().enableOffline()

D. firebase.firestore().activatePersistence()

Solution

1. Step 1: Recall the official method name

   The correct method to enable offline persistence is enablePersistence().

2. Step 2: Check other options

   Other options like startPersistence(), enableOffline(), and activatePersistence() are not valid Firebase Firestore methods.

3. Final Answer:

   firebase.firestore().enablePersistence() -> Option A

4. Quick Check:

   Enable persistence method = enablePersistence() [OK]

Hint: Use enablePersistence() to turn on offline support [OK]

Common Mistakes:

• Using incorrect method names
• Confusing with other Firebase services
• Missing parentheses after method

3. Consider this code snippet in a Firebase web app:

firebase.firestore().enablePersistence()
  .catch((err) => {
    if (err.code == 'failed-precondition') {
      console.log('Multiple tabs open');
    } else if (err.code == 'unimplemented') {
      console.log('Persistence not supported');
    }
  });

console.log('Persistence enabled');

What will be printed if the browser does not support offline persistence?

medium

A. Persistence not supported

B. Multiple tabs open

C. Persistence enabled

D. No output

Solution

1. Step 1: Understand error handling in enablePersistence()

   If the browser does not support offline persistence, the error code is 'unimplemented'.

2. Step 2: Identify the console output for 'unimplemented'

   The catch block logs 'Persistence not supported' for this error code.

3. Final Answer:

   Persistence not supported -> Option A

4. Quick Check:

   Unsupported browser error = 'unimplemented' message [OK]

Hint: Check error code 'unimplemented' for unsupported browsers [OK]

Common Mistakes:

• Ignoring error codes
• Assuming persistence always enables
• Confusing 'failed-precondition' with unsupported

4. You wrote this code to enable offline persistence:

firebase.firestore().enablePersistence();
firebase.firestore().enablePersistence();

But your app throws an error about multiple tabs. What is the problem?

medium

A. You need to call enableIndexedDbPersistence() instead

B. You forgot to import Firebase

C. Persistence is not supported in your browser

D. Calling enablePersistence() twice causes a conflict

Solution

1. Step 1: Analyze multiple calls to enablePersistence()

   Calling enablePersistence() more than once can cause a 'failed-precondition' error due to multiple tabs or instances.

2. Step 2: Understand error cause

   This error means only one tab can have persistence enabled at a time, so calling it twice in the same app causes conflict.

3. Final Answer:

   Calling enablePersistence() twice causes a conflict -> Option D

4. Quick Check:

   Multiple enablePersistence() calls = conflict error [OK]

Hint: Call enablePersistence() only once per app instance [OK]

Common Mistakes:

• Ignoring multiple calls cause errors
• Assuming import errors cause this
• Confusing with browser support issues

5. You want to enable offline persistence in a Firebase web app that may open in multiple tabs. Which approach correctly handles this scenario?

hard

A. Use enableIndexedDbPersistence() and catch 'failed-precondition' error to fallback to enableMultiTabIndexedDbPersistence()

B. Call enablePersistence() twice to ensure all tabs have persistence

C. Use enableMultiTabIndexedDbPersistence() and catch 'failed-precondition' error to fallback to enablePersistence()

D. Disable persistence and rely only on online data fetching

Solution

1. Step 1: Understand multi-tab persistence support

   Firebase provides enableMultiTabIndexedDbPersistence() to allow persistence across multiple tabs.

2. Step 2: Handle errors properly

   If multi-tab persistence fails with 'failed-precondition', fallback to single-tab enablePersistence() to avoid errors.

3. Final Answer:

   Use enableMultiTabIndexedDbPersistence() and catch 'failed-precondition' error to fallback to enablePersistence() -> Option C

4. Quick Check:

   Multi-tab persistence = enableMultiTabIndexedDbPersistence() with fallback [OK]

Hint: Use multi-tab persistence with fallback to single-tab [OK]

Common Mistakes:

• Calling enablePersistence() multiple times
• Ignoring multi-tab persistence errors
• Disabling persistence unnecessarily