Hone logo
Hone
Problems

Angular Push Notification Service

This challenge focuses on building a reusable Angular service to handle push notifications. Implementing push notifications allows your Angular application to engage users even when they aren't actively using it, improving user retention and providing timely updates. This service will manage the subscription to a push notification service (we'll simulate this with a simple mock), handle receiving notifications, and display them to the user.

Problem Description

You are tasked with creating an PushNotificationService in Angular that handles push notification subscriptions and display. The service should:

  1. Subscribe to Push Notifications: Provide a method subscribeToNotifications() that simulates subscribing to a push notification service. For this simulation, simply log a message to the console indicating a subscription attempt. In a real-world scenario, this would involve interacting with a service like Firebase Cloud Messaging (FCM) or similar.
  2. Receive Push Notifications: Provide a method receiveNotification(notificationData: any) that accepts a notification object as input. This object will contain data relevant to the notification (e.g., title, body, data).
  3. Display Push Notifications: When a notification is received, the service should display a simple, non-intrusive notification to the user. For this challenge, display the notification title and body in an alert box.
  4. Unsubscribe from Push Notifications: Provide a method unsubscribeFromNotifications() that simulates unsubscribing from the push notification service. Log a message to the console indicating an unsubscription attempt.

Key Requirements:

  • The service should be injectable into other Angular components.
  • The notification display should be non-blocking (i.e., it shouldn't freeze the UI). Using window.alert is acceptable for this simplified simulation.
  • The service should be reusable and maintainable.

Expected Behavior:

  • Calling subscribeToNotifications() should log a message to the console.
  • Calling receiveNotification() with a valid notification object should display an alert box with the notification title and body.
  • Calling unsubscribeFromNotifications() should log a message to the console.

Edge Cases to Consider:

  • What happens if notificationData is null or undefined? The service should handle this gracefully (e.g., by logging an error or doing nothing).
  • What happens if notificationData doesn't contain a title or body? The service should handle this gracefully (e.g., by displaying a generic message).

Examples

Example 1:

Input: subscribeToNotifications()
Output: Console log: "Subscribing to push notifications..."
Explanation: The service attempts to subscribe to the notification service.

Example 2:

Input: receiveNotification({ title: "New Message", body: "You have a new message from John." })
Output: Alert box displaying: "New Message\nYou have a new message from John."
Explanation: The service receives a notification and displays it in an alert.

Example 3:

Input: receiveNotification(null)
Output: Console log: "Error: Notification data is null or undefined." (or similar error handling)
Explanation: The service handles a null notification gracefully.

Constraints

  • The service must be written in TypeScript.
  • The notification display must use window.alert for simplicity.
  • The service should be designed to be easily adaptable to a real push notification service (e.g., FCM) with minimal code changes.
  • The service should be modular and well-documented.

Notes

  • You don't need to implement the actual push notification sending logic (the backend part). This challenge focuses solely on the Angular client-side handling of notifications.
  • Consider using Angular's dependency injection to make the service testable.
  • Think about how you would handle different notification types or priorities in a real-world scenario. While not required for this challenge, it's a good consideration for future expansion.
  • Error handling is important. Consider what might go wrong and how your service should respond.
Loading editor...
typescript