Device token management in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the device token for push notifications.

Firebase

const messaging = firebase.messaging();
messaging.getToken({ vapidKey: '[1]' })
  .then((currentToken) => {
    if (currentToken) {
      console.log('Device token:', currentToken);
    } else {
      console.log('No registration token available.');
    }
  })
  .catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
  });

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

AYOUR_PUBLIC_VAPID_KEY_HERE

BfirebaseConfig

CapiKey

DprojectId

Attempts:

3 left

💡 Hint

Common Mistakes

Using the entire firebaseConfig object instead of the vapidKey string.

Leaving the vapidKey empty or undefined.

The vapidKey is required to get the device token for push notifications in Firebase Cloud Messaging.

2fill in blank

medium

Complete the code to save the device token to Firestore under the user's document.

Firebase

const db = firebase.firestore();
const userId = 'user123';
const token = [1];

db.collection('users').doc(userId).set({
  deviceToken: token
}, { merge: true });

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

AcurrentToken

BuserToken

CmessagingToken

DdeviceId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that was not defined or assigned the token value.

Confusing device ID with device token.

The variable currentToken holds the device token retrieved from Firebase Messaging.

3fill in blank

hard

Fix the error in the code to correctly listen for token refresh events.

Firebase

messaging.[1](() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed:', refreshedToken);
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
  });
});

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

AonTokenRefreshListener

BonTokenChanged

ConTokenUpdate

DonTokenRefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or non-existent method names for token refresh events.

Not handling the promise returned by getToken().

The correct Firebase Messaging method to listen for token refresh is onTokenRefresh.

4fill in blank

hard

Fill in the blank to correctly unsubscribe from push notifications and delete the token.

Firebase

messaging.[1](currentToken).then(() => {
  console.log('Token deleted and unsubscribed successfully.');
}).catch((err) => {
  console.log('Error unsubscribing or deleting token:', err);
});

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

Aunsubscribe

BdeleteToken

CremoveToken

DstopNotifications

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like unsubscribe, removeToken or stopNotifications.

Forgetting to pass the currentToken.

Deleting the token using deleteToken unsubscribes from push notifications (including topics) and deletes the token.

5fill in blank

hard

Fill all three blanks to update the device token in Firestore only if the new token is different.

Firebase

const db = firebase.firestore();
const userId = 'user456';
const newToken = [1];

const userRef = db.collection('users').doc(userId);
userRef.get().then((doc) => {
  if (doc.exists && doc.data().deviceToken [2] [3]) {
    return userRef.update({ deviceToken: newToken });
  }
}).then(() => {
  console.log('Device token updated if changed.');
}).catch((error) => {
  console.error('Error updating token:', error);
});

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

AcurrentToken

B!==

C===

DnewToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using equality operator instead of inequality.

Mixing up variable names for tokens.

The code compares the existing deviceToken with the newToken and updates only if they are different.