Bundle preloading in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to preload a Firebase bundle using the SDK.

Firebase

const bundleTask = firebase.firestore().bundle('[1]');

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

Apreload

BloadBundle

CbundleName

DmyBundle

Attempts:

3 left

💡 Hint

Common Mistakes

Using method names instead of the bundle name string.

Passing an undefined variable instead of a string.

The bundle name is passed as a string to the bundle() method to start preloading.

2fill in blank

medium

Complete the code to listen for progress updates while loading a Firebase bundle.

Firebase

bundleTask.onProgress(([1]) => { console.log('Progress:', [1]); });

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

Aprogress

Bsnapshot

Cevent

Dstatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'event' or 'status' instead of 'snapshot'.

Not matching the parameter name inside the callback.

The onProgress callback receives a snapshot object with progress details.

3fill in blank

hard

Fix the error in the code to correctly load a Firebase bundle from a Uint8Array.

Firebase

firebase.firestore().loadBundle([1]).then(() => console.log('Bundle loaded'));

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

AbundleBytes

BbundleData

CbundleName

DbundleUint8Array

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the bundle name string instead of the bytes.

Using a variable name that does not hold the Uint8Array.

The loadBundle method expects a Uint8Array containing the bundle bytes, commonly named bundleBytes.

4fill in blank

hard

Fill both blanks to create a listener that handles bundle loading progress and completion.

Firebase

bundleTask.onProgress(([1]) => {
  if ([2].taskState === 'Success') {
    console.log('Bundle loaded successfully');
  }
});

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

AtaskState

Bsnapshot

Cprogress

Dstatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the parameter and inside the function.

Checking a property on an undefined variable.

The callback receives a snapshot object, which has a taskState property to check if loading succeeded.

5fill in blank

hard

Fill all three blanks to preload a bundle, listen for progress, and handle completion.

Firebase

const bundleTask = firebase.firestore().bundle('[1]');
bundleTask.onProgress(([2]) => {
  console.log('Progress:', [2].bytesLoaded);
  if ([2].taskState === '[3]') {
    console.log('Bundle fully loaded');
  }
});

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

AmyBundle

Bsnapshot

CSuccess

Dprogress

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up parameter names and property names.

Using incorrect strings for task state.

Use the bundle name string for bundle(), snapshot as the progress parameter, and check if taskState equals 'Success' to confirm loading.