Push notification integration in HLD - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize push notifications in the app.

HLD

PushNotificationManager.[1]();

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

Aactivate

Bstart

Claunch

Dinitialize

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' or 'launch' which might sound correct but are not standard method names.

Confusing activation with initialization.

The method to start push notification service is usually called 'initialize' to set up necessary configurations.

2fill in blank

medium

Complete the code to request user permission for push notifications.

HLD

NotificationService.request[1]Permission();

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

APush

BLocation

CCamera

DMicrophone

Attempts:

3 left

💡 Hint

Common Mistakes

Requesting unrelated permissions like camera or microphone.

Confusing push permission with location permission.

To receive push notifications, the app must request 'Push' permission from the user.

3fill in blank

hard

Fix the error in the code to handle incoming push notifications.

HLD

PushNotificationManager.onNotificationReceived = function([1]) {
  console.log('Notification:', [1].message);
};

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

Aevent

Bmsg

Cnotification

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name that does not match the object used inside the function.

Using generic names like 'event' or 'msg' that cause confusion.

The function parameter should be named 'notification' to clearly represent the incoming notification object.

4fill in blank

hard

Fill both blanks to subscribe the user to a topic and handle errors.

HLD

PushNotificationManager.subscribeToTopic([1])
  .then(() => console.log('Subscribed to topic'))
  .catch([2] => console.error('Subscription error:', [2]));

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

A'news-updates'

Berror

Cerr

D'daily-alerts'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-string value for the topic name.

Using inconsistent error parameter names.

The topic name should be a string like 'news-updates'. The error handler parameter is commonly named 'error' to represent the error object.

5fill in blank

hard

Fill all three blanks to create a notification payload and send it.

HLD

const payload = {
  title: [1],
  body: [2],
  priority: [3]
};
PushNotificationManager.sendNotification(payload);

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

A'Welcome!'

B'You have a new message.'

C'high'

D'low'

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-string values for title or body.

Setting priority to 'low' when high priority is needed.

The title and body are strings describing the notification. Priority is set to 'high' to ensure prompt delivery.

Practice

1. What is the main purpose of integrating push notifications in a mobile app?

easy

A. To keep users updated even when the app is closed

B. To increase app size significantly

C. To slow down the app performance

D. To disable user interaction

Solution

1. Step 1: Understand push notification purpose

   Push notifications are messages sent to users to keep them informed or engaged.

2. Step 2: Identify correct purpose in options

   Only To keep users updated even when the app is closed correctly states that notifications keep users updated even when app is closed.

3. Final Answer:

   To keep users updated even when the app is closed -> Option A

4. Quick Check:

   Push notifications = keep users updated [OK]

Hint: Push notifications inform users outside the app [OK]

Common Mistakes:

• Thinking notifications increase app size
• Believing notifications slow app down
• Assuming notifications disable interaction

2. Which code snippet correctly requests user permission for push notifications in a mobile app?

easy

A. requestNotificationPermission();

B. enablePushNotifications();

C. askUserForNotificationPermission();

D. requestPermissionForNotifications();

Solution

1. Step 1: Identify standard permission request method

   Common method names include 'requestPermissionForNotifications' to ask user consent.

2. Step 2: Compare options for correct syntax

   requestPermissionForNotifications(); uses a clear, standard naming pattern for requesting permission.

3. Final Answer:

   requestPermissionForNotifications(); -> Option D

4. Quick Check:

   Permission request method = requestPermissionForNotifications() [OK]

Hint: Look for method names starting with 'requestPermission' [OK]

Common Mistakes:

• Using method names that don't request permission
• Confusing enabling notifications with requesting permission
• Using non-standard or undefined method names

3. Given this code snippet handling a push notification:

onNotificationReceived(notification) {
  if (notification.type === 'message') {
    showAlert(notification.title);
  }
}

What happens when a notification with type 'message' arrives?

medium

A. An alert with the notification title is shown

B. The notification is ignored

C. The app crashes due to missing handler

D. A log is printed but no alert

Solution

1. Step 1: Analyze the notification type check

   The code checks if notification.type equals 'message'.

2. Step 2: Understand the action on matching type

   If true, it calls showAlert with notification.title, displaying an alert.

3. Final Answer:

   An alert with the notification title is shown -> Option A

4. Quick Check:

   Type 'message' triggers alert display [OK]

Hint: Check condition and action inside notification handler [OK]

Common Mistakes:

• Assuming notification is ignored
• Thinking app crashes without error
• Confusing logging with alert display

4. Identify the error in this push notification handler code:

function handleNotification(notification) {
  if notification.isRead = false {
    displayNotification(notification);
  }
}

medium

A. Missing semicolon after function declaration

B. Using assignment '=' instead of comparison '==' in if condition

C. Incorrect function name 'handleNotification'

D. Notification object missing required fields

Solution

1. Step 1: Check the if condition syntax

   The condition uses '=' which assigns value instead of comparing.

2. Step 2: Identify correct comparison operator

   It should use '==' or '===' to compare values, not '='.

3. Final Answer:

   Using assignment '=' instead of comparison '==' in if condition -> Option B

4. Quick Check:

   Use '==' for comparison, not '=' [OK]

Hint: Remember '=' assigns, '==' compares in conditions [OK]

Common Mistakes:

• Confusing assignment and comparison operators
• Ignoring syntax errors in if statements
• Assuming function name causes error

5. You want to send a push notification only if the user has granted permission and the app is in background. Which logic correctly implements this?

hard

A. if (userPermissionGranted && appState !== 'background') { sendPushNotification(); }

B. if (userPermissionGranted || appState === 'background') { sendPushNotification(); }

C. if (userPermissionGranted && appState === 'background') { sendPushNotification(); }

D. if (!userPermissionGranted && appState === 'background') { sendPushNotification(); }

Solution

1. Step 1: Understand conditions for sending notification

   Notification should send only if permission is granted AND app is in background.

2. Step 2: Evaluate logical operators in options

   if (userPermissionGranted && appState === 'background') { sendPushNotification(); } uses '&&' (AND) correctly to check both conditions.

3. Final Answer:

   if (userPermissionGranted && appState === 'background') { sendPushNotification(); } -> Option C

4. Quick Check:

   Use AND (&&) to require both conditions [OK]

Hint: Use AND (&&) to combine required conditions [OK]

Common Mistakes:

• Using OR (||) instead of AND (&&)
• Negating permission incorrectly
• Checking wrong app state