Push notification integration in HLD - System Design Guide

Problem Statement

When an application needs to inform users instantly about important events, relying on users to refresh or poll for updates causes delays and wastes resources. Without a push notification system, users miss timely alerts, reducing engagement and satisfaction.

Solution

Push notification integration enables the server to send messages directly to user devices in real-time. It uses platform-specific services to deliver notifications efficiently, ensuring users receive updates instantly without continuous polling.

Architecture

Application

Server

→Push Notification

↓

Notification

Queue/Topic

↓

Platform-specific

Push Gateways

This diagram shows the flow from the application server sending notifications to a queue, which the push notification service processes and delivers through platform-specific gateways to user devices.

Trade-offs

✓ Pros

→

Delivers messages instantly, improving user engagement.

→

Reduces server load by avoiding constant polling from clients.

→

Supports multiple platforms via standardized push services.

→

Enables rich notifications with actions and media.

✗ Cons

→

Requires integration with multiple platform-specific services (e.g., APNs, FCM).

→

Handling device tokens and subscription management adds complexity.

→

Delivery is not guaranteed; network or platform restrictions may delay or drop notifications.

Use when timely user updates are critical and user devices support push services, especially for mobile apps or web apps with active user bases over 10,000 daily users.

Avoid if user engagement is low or notifications are not time-sensitive, or if the user base is very small (under 1,000 users) where polling overhead is negligible.

Real World Examples

Uber

Uses push notifications to instantly alert riders and drivers about trip status changes, ensuring timely communication.

Netflix

Sends push notifications to inform users about new releases and personalized recommendations, increasing user retention.

Airbnb

Delivers booking confirmations and host messages via push notifications to keep users informed in real-time.

Alternatives

Polling

Clients repeatedly request updates from the server at intervals instead of receiving push messages.

Use when: Choose when real-time updates are not critical and user base is small to moderate.

WebSockets

Maintains a persistent connection for two-way communication instead of one-way push notifications.

Use when: Choose when bi-directional real-time communication is needed, such as chat applications.

Summary

Push notification integration enables servers to send real-time messages directly to user devices.

It improves user engagement by delivering timely alerts without client polling.

Integration requires handling platform-specific services and managing device subscriptions.

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