Cloud Messaging

export function provideMessaging(fn: () => Messaging): EnvironmentProviders;
export function getMessaging(app?: FirebaseApp): Messaging;

export class Messaging extends Messaging {}
export class MessagingInstances extends Array<Messaging> {}
export const messagingInstance$: Observable<Messaging>;

/**
 * Get FCM registration token
 * @param messaging - Messaging instance
 * @param options - Optional token options
 * @returns Promise resolving to FCM token
 */
export function getToken(
  messaging: Messaging,
  options?: GetTokenOptions
): Promise<string>;

/**
 * Delete FCM registration token
 * @param messaging - Messaging instance
 * @returns Promise that resolves when token is deleted
 */
export function deleteToken(messaging: Messaging): Promise<boolean>;

/**
 * Listen to foreground messages
 * @param messaging - Messaging instance
 * @param nextOrObserver - Message handler function
 * @returns Unsubscribe function
 */
export function onMessage(
  messaging: Messaging,
  nextOrObserver: (payload: MessagePayload) => void
): Unsubscribe;

/**
 * Check if Messaging is supported
 * @returns Promise resolving to support status
 */
export function isSupported(): Promise<boolean>;

interface MessagePayload {
  from?: string;
  collapseKey?: string;
  messageId?: string;
  notification?: NotificationPayload;
  data?: { [key: string]: string };
  fcmOptions?: FcmOptions;
}

interface NotificationPayload {
  title?: string;
  body?: string;
  image?: string;
  icon?: string;
}

interface GetTokenOptions {
  vapidKey?: string;
  serviceWorkerRegistration?: ServiceWorkerRegistration;
}

import { Component, inject } from '@angular/core';
import { Messaging, getToken, onMessage } from '@angular/fire/messaging';

@Component({
  selector: 'app-messaging',
  template: `...`,
})
export class MessagingComponent {
  private messaging = inject(Messaging);

  async requestPermission() {
    try {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        const token = await getToken(this.messaging, {
          vapidKey: 'your-vapid-key'
        });
        console.log('FCM Token:', token);
        return token;
      }
    } catch (error) {
      console.error('Permission error:', error);
    }
  }

  listenForMessages() {
    onMessage(this.messaging, (payload) => {
      console.log('Message received:', payload);
      // Handle foreground message
      if (payload.notification) {
        this.showNotification(payload.notification);
      }
    });
  }

  private showNotification(notification: any) {
    new Notification(notification.title, {
      body: notification.body,
      icon: notification.icon
    });
  }
}