Angular Push Notification Service

This challenge focuses on implementing a robust push notification system within an Angular application. Push notifications are essential for engaging users by delivering timely updates and alerts, even when the application is not actively in use. You will build a service that handles requesting user permission, registering for push notifications, and receiving/displaying them.

Problem Description

Your task is to create an Angular service (PushNotificationService) that encapsulates the logic for managing push notifications. This service should:

1. Request Permission: Prompt the user for permission to send notifications. This is a crucial first step and requires user interaction.
2. Register Service Worker: If permission is granted, register a service worker. The service worker is responsible for receiving push messages from the server and displaying notifications to the user.
3. Subscribe to Push Service: Obtain a PushSubscription object from the browser's Push API. This subscription object will be used to identify the specific client that should receive notifications.
4. Handle Incoming Notifications: Implement logic to display notifications when a message is received via the service worker. This includes handling notification clicks to open the application.
5. Unsubscribe (Optional but Recommended): Provide a method to unsubscribe from push notifications.

Key Requirements:

• The service should be implemented in TypeScript.
• It should leverage the ServiceWorkerModule provided by Angular CLI.
• The service should provide clear public methods for the application to interact with, such as requestPermissionAndSubscribe(), receiveNotification(), and unsubscribe().
• Error handling for cases where push notifications are not supported by the browser or denied by the user is important.
• The service worker script itself needs to be created and configured to handle incoming push events and display notifications.

Expected Behavior:

• When requestPermissionAndSubscribe() is called:
  • If notifications are not supported or the user has previously denied permission, the function should indicate this (e.g., return false or throw an error).
  • If permission is not yet granted, the browser's native permission prompt should appear.
  • If permission is granted, the application should receive a PushSubscription object, and the service worker should be registered and ready to receive messages.
• When a push message arrives and the service worker is active:
  • A browser notification should be displayed to the user.
  • The notification should have a title and body derived from the push message payload.
  • Clicking the notification should bring the user's application to the forefront.
• When unsubscribe() is called, the client should be unsubscribed from the push service, and the service worker should be unregistered (if applicable).

Edge Cases to Consider:

• Browser Support: Not all browsers support the Push API. Your implementation should gracefully handle this.
• User Denies Permission: The user may explicitly deny permission. The service should not repeatedly ask for permission.
• Service Worker Registration Errors: Handle potential errors during service worker registration.
• Push Message Payload Format: Assume a JSON payload for push messages, with at least title and body properties for the notification.

Examples

Example 1: Requesting and Receiving Notification

Component (or App Module) Interaction:

// In your app.component.ts or a relevant component
import { PushNotificationService } from './push-notification.service';

// ...

constructor(private pushNotificationService: PushNotificationService) {}

ngOnInit() {
  this.pushNotificationService.requestPermissionAndSubscribe().subscribe(
    (subscription) => {
      if (subscription) {
        console.log('User subscribed to push notifications:', subscription);
        // Send this subscription object to your backend server
      }
    },
    (error) => {
      console.error('Error subscribing to push notifications:', error);
    }
  );
}

// Assume a push message arrives with payload: { title: 'New Update', body: 'A new version is available!' }
// The PushNotificationService will internally handle displaying this notification.

Service Worker (ngsw-worker.js or custom service-worker.js):

The service worker needs to listen for push events and use the Notifications API to display them.

// Simplified service worker logic example (this would be part of your built service worker file)
self.addEventListener('push', event => {
  const data = event.data.json(); // Assuming JSON payload
  const title = data.title || 'Notification';
  const options = {
    body: data.body || 'You have a new message.',
    icon: '/assets/icons/icon-192x192.png', // Example icon
    // Add other notification options as needed
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close(); // Close the notification

  // Open your application window
  event.waitUntil(
    clients.openWindow('/') // Opens the root of your application
  );
});

Explanation:

The PushNotificationService in the component initiates the permission request and subscription process. If successful, it provides the PushSubscription object. The service worker, registered by Angular, intercepts incoming push events, parses the payload, and displays a notification. The notificationclick event listener ensures that clicking the notification brings the user back to the application.

Example 2: Handling Permission Denied

Component (or App Module) Interaction:

// In your app.component.ts or a relevant component
import { PushNotificationService } from './push-notification.service';

// ...

constructor(private pushNotificationService: PushNotificationService) {}

ngOnInit() {
  this.pushNotificationService.requestPermissionAndSubscribe().subscribe(
    (subscription) => {
      // ... handle successful subscription
    },
    (error) => {
      if (error.message === 'Notifications denied by user' || error.message === 'Notifications not supported') {
        console.log('Push notifications are not available or denied.');
        // You might display a message to the user indicating this.
      } else {
        console.error('An unexpected error occurred:', error);
      }
    }
  );
}

Explanation:

If the user has previously denied permission or if the browser does not support push notifications, the requestPermissionAndSubscribe() method should throw an error or return a specific observable that signals this condition. The component then handles this error gracefully, perhaps by informing the user that push notifications are unavailable.

Constraints

• The solution must be implemented using TypeScript within an Angular project.
• The solution must integrate with Angular's built-in Service Worker (@angular/pwa). You will need to configure ngsw-config.json and ensure the service worker is built and served correctly.
• The PushSubscription object obtained from the browser's Push API must be handled (e.g., logged or passed to a hypothetical backend function).
• The service worker script must be able to receive and display notifications with at least a title and body.
• Performance is not a primary concern for this challenge, but the implementation should be reasonably efficient.

Notes

• This challenge assumes you have a basic Angular project set up.
• You will need to enable the Angular Service Worker in your project (ng add @angular/pwa).
• The actual sending of push notifications from a server to the client is outside the scope of this challenge. This challenge focuses on the client-side implementation.
• Consider using RxJS operators (map, catchError, tap) within your service to manage asynchronous operations and error handling effectively.
• The PushSubscription object will contain an endpoint URL. This is the URL your backend server will use to send push messages to this specific client.
• Remember that handling sensitive data like the PushSubscription object should be done securely on your backend.
• You'll likely need to create a separate service-worker.js file (or modify the one generated by @angular/pwa) to handle the push event logic, especially if you're not using the default ngsw-config.json to control all service worker behavior.