# Configuración de Notificaciones Push con Firebase

## Estado Actual

✅ **Completado:**
- Instalación de dependencias de Firebase (`firebase` y `@angular/fire`)
- Configuración básica en `app.config.ts`
- Servicio de Firebase Messaging (`firebase-messaging.service.ts`)
- Service Worker para notificaciones en segundo plano (`firebase-messaging-sw.js`)
- Configuración en archivos de environment
- Componente de demostración

## Pasos Pendientes para Completar la Configuración

### 1. Obtener el App ID correcto de Firebase

Actualmente se está usando un placeholder `1:101019786488388232093:web:your_app_id`. Necesitas:

1. Ir a [Firebase Console](https://console.firebase.google.com/)
2. Seleccionar el proyecto "subito-apps"
3. Ir a "Configuración del proyecto" > "General"
4. En la sección "Tus apps", encontrar o crear una app web
5. Copiar el `appId` real
6. Reemplazar `your_app_id` en los archivos:
   - `src/environments/environment.ts`
   - `src/environments/environment.development.ts`
   - `public/firebase-messaging-sw.js`

### 2. Generar VAPID Key

1. En Firebase Console, ir a "Configuración del proyecto" > "Cloud Messaging"
2. En la sección "Configuración web", generar un par de claves VAPID
3. Copiar la clave pública VAPID
4. Reemplazar `YOUR_VAPID_KEY` en los archivos de environment

### 3. Configurar el Service Worker

En `angular.json`, asegúrate de que el service worker esté habilitado:

```json
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
```

### 4. Usar el Componente de Demostración

Puedes importar y usar el componente `PushNotificationDemoComponent` en cualquier parte de tu aplicación:

```typescript
import { PushNotificationDemoComponent } from './components/push-notification-demo/push-notification-demo.component';

@Component({
  // ...
  imports: [PushNotificationDemoComponent],
  template: `
    <app-push-notification-demo></app-push-notification-demo>
  `
})
```

### 5. Integrar con tu Backend

En `firebase-messaging.service.ts`, actualiza el método `sendTokenToServer()` para enviar el token FCM a tu backend:

```typescript
private async sendTokenToServer(token: string) {
  try {
    // Reemplaza con tu endpoint real
    await this.http.post('/api/fcm-token', { 
      token,
      userId: this.getCurrentUserId() // Implementa según tu lógica
    }).toPromise();
    // console.log('Token enviado al servidor:', token);
  } catch (error) {
    console.error('Error al enviar token al servidor:', error);
  }
}
```

### 6. Enviar Notificaciones desde el Backend

Ejemplo de cómo enviar notificaciones desde tu backend usando el Admin SDK:

```javascript
const admin = require('firebase-admin');

// Inicializar con las credenciales que proporcionaste
const serviceAccount = {
  "type": "service_account",
  "project_id": "subito-apps",
  "private_key_id": "8f077d705875b117d6bc01a6ef5163716d713010",
  "private_key": "-----BEGIN PRIVATE KEY-----\n...",
  "client_email": "firebase-adminsdk-il16y@subito-apps.iam.gserviceaccount.com",
  // ... resto de credenciales
};

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

// Enviar notificación
const message = {
  notification: {
    title: 'Título de la notificación',
    body: 'Cuerpo de la notificación'
  },
  token: 'TOKEN_FCM_DEL_USUARIO'
};

admin.messaging().send(message)
  .then((response) => {
    // console.log('Notificación enviada:', response);
  })
  .catch((error) => {
    // console.log('Error al enviar notificación:', error);
  });
```

### 7. Probar las Notificaciones

1. Ejecuta la aplicación: `ng serve`
2. Abre las herramientas de desarrollador del navegador
3. Usa el componente de demostración para:
   - Solicitar permisos
   - Obtener el token FCM
   - Ver mensajes recibidos
4. Envía una notificación de prueba desde Firebase Console o tu backend

## Archivos Modificados

- ✅ `src/app/app.config.ts` - Configuración de Firebase
- ✅ `src/environments/environment.ts` - Credenciales de Firebase
- ✅ `src/environments/environment.development.ts` - Credenciales de Firebase
- ✅ `src/app/core/service/firebase-messaging.service.ts` - Servicio de mensajería
- ✅ `public/firebase-messaging-sw.js` - Service Worker
- ✅ `ngsw-config.json` - Configuración del service worker
- ✅ `src/app/components/push-notification-demo/push-notification-demo.component.ts` - Componente de demostración

## Notas Importantes

- Las notificaciones push solo funcionan en HTTPS (excepto localhost)
- El usuario debe conceder permisos explícitamente
- Las notificaciones en primer plano se manejan diferente a las de segundo plano
- Guarda el token FCM en tu base de datos asociado al usuario
- Los tokens pueden cambiar, implementa un mecanismo de actualización

## Troubleshooting

- Si las notificaciones no llegan, verifica que el service worker esté registrado correctamente
- Revisa la consola del navegador para errores
- Asegúrate de que Firebase esté configurado correctamente en la consola
- Verifica que el VAPID key sea correcto