27. PWA, offline y notificaciones push

// 1. Versión del caché. Cambiarla es lo que provoca que en la activación
//    se borren las cachés anteriores. Las herramientas de construcción
//    la sustituyen automáticamente por un hash del contenido.
const VERSION = 'taskflow-v3';
const CACHE_ARMAZON = `${VERSION}-armazon`;

// 2. El armazón: lo mínimo para pintar algo útil sin red.
//    Deliberadamente NO incluye datos, solo la aplicación.
const ARMAZON = [
  '/',
  '/index.html',
  '/offline.html',
  '/assets/book.css',
  '/assets/logo.svg',
];

// 3. INSTALACIÓN. waitUntil() alarga la vida del evento hasta que la
//    promesa se resuelve; sin él, el navegador podría matar el proceso
//    a mitad de la descarga y dejar la caché incompleta.
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_ARMAZON).then((cache) => cache.addAll(ARMAZON))
    // Ojo: addAll es atómico. Si UNO solo de los recursos devuelve un
    // estado distinto de 2xx, la promesa entera rechaza y la instalación
    // FALLA. Es la causa número uno de «mi service worker no instala».
  );
});

// 4. ACTIVACIÓN. Es el único momento seguro para limpiar cachés viejas,
//    porque aquí ya sabemos que ningún cliente de la versión anterior
//    sigue vivo y necesitando esos ficheros.
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys()
      .then((nombres) => Promise.all(
        nombres
          .filter((n) => !n.startsWith(VERSION))
          .map((n) => caches.delete(n)),
      ))
      // Tomamos el control de las pestañas ya abiertas que aún no
      // tenían controlador. Sin esto, esperaríamos a la siguiente carga.
      .then(() => self.clients.claim()),
  );
});

// 5. INTERCEPCIÓN. Se dispara para CADA petición del ámbito.
self.addEventListener('fetch', (event) => {
  const req = event.request;

  // Regla de oro: no toques lo que no sabes manejar. Si no llamas a
  // respondWith(), la petición sigue su curso normal hacia la red,
  // que es exactamente lo que quieres para todo lo que no es tu caso.
  if (req.method !== 'GET') return;
  if (new URL(req.url).origin !== self.location.origin) return;

  // Las navegaciones se tratan aparte: si la red falla, en lugar del
  // dinosaurio devolvemos nuestra propia página.
  if (req.mode === 'navigate') {
    event.respondWith(
      fetch(req).catch(() => caches.match('/offline.html')),
    );
    return;
  }

  // Para el resto: caché primero, y si no está, red.
  event.respondWith(
    caches.match(req).then((cacheada) => cacheada || fetch(req)),
  );
});

// Despliega este fichero en la misma URL que el service worker roto.
// Cada cliente que lo descargue se limpiará solo y volverá a un estado
// sin service worker en la siguiente navegación.
self.addEventListener('install', () => self.skipWaiting());

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    const nombres = await caches.keys();
    await Promise.all(nombres.map((n) => caches.delete(n)));
    await self.registration.unregister();
    const clientes = await self.clients.matchAll({ type: 'window' });
    clientes.forEach((c) => c.navigate(c.url));
  })());
});

async function cacheFirst(req, nombreCache) {
  const cache = await caches.open(nombreCache);
  const cacheada = await cache.match(req);
  if (cacheada) return cacheada;

  const respuesta = await fetch(req);

  // Solo guardamos respuestas correctas y no opacas.
  // Cachear un 404 o un 500 significa servirlo durante días.
  if (respuesta.ok && respuesta.type === 'basic') {
    // clone() es OBLIGATORIO: el cuerpo de una Response es un flujo
    // que se consume una sola vez. Si lo metes en la caché sin clonar,
    // el navegador ya no puede entregárselo a la página.
    cache.put(req, respuesta.clone());
  }
  return respuesta;
}

async function staleWhileRevalidate(req, nombre) {
  const cache = await caches.open(nombre);
  const cacheada = await cache.match(req);

  // Lanzamos la actualización SIN esperarla.
  const enCurso = fetch(req)
    .then((r) => { if (r.ok) cache.put(req, r.clone()); return r; })
    .catch(() => undefined);

  // Si había copia, se devuelve ya. Si no, se espera a la red.
  return cacheada ?? (await enCurso) ?? Response.error();
}

// Uso dentro del manejador de fetch. Ojo con el detalle:
// event.waitUntil(enCurso) mantiene vivo el service worker hasta que la
// revalidación termina. Sin eso, el navegador podría detener el proceso
// justo después de responder y la actualización nunca se guardaría.

# Añade la dependencia, genera ngsw-config.json, crea el manifiesto,
# los iconos de ejemplo y registra el service worker en la aplicación.
ng add @angular/pwa

import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideServiceWorker } from '@angular/service-worker';

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      // Desactivado en desarrollo: un service worker cacheando
      // mientras trabajas con recarga en caliente es una tortura.
      enabled: !isDevMode(),

      // Espera a que la aplicación quede estable antes de registrar.
      // Evita competir por el ancho de banda durante el arranque, que
      // es justo cuando el usuario está esperando a ver algo.
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
};

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",

  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/media/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],

  "dataGroups": [
    {
      "name": "api-tareas",
      "urls": ["/api/tareas", "/api/tareas?*", "/api/proyectos/*/tareas"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 200,
        "maxAge": "1h",
        "timeout": "3s"
      }
    },
    {
      "name": "api-catalogos",
      "urls": ["/api/etiquetas", "/api/estados", "/api/usuarios/me"],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 50,
        "maxAge": "12h"
      }
    }
  ],

  "navigationUrls": ["/**", "!/**/*.*", "!/**/api/**"]
}

# Abre esta URL en la aplicación desplegada:
https://taskflow.example.com/ngsw/state

# Devuelve algo como:
# NGSW Debug Info:
# Driver state: NORMAL ((nominal))
# Latest manifest hash: 4f2a91c...
# Last update check: 3m14s ago
# === Version 4f2a91c ===
# Clients: 8b1c-...
# === Idle Task Queue ===
# Last update tick: 2s ago

{
  "name": "TaskFlow · Gestión de tareas de equipo",
  "short_name": "TaskFlow",
  "description": "Organiza proyectos, tareas y etiquetas con tu equipo.",
  "start_url": "/?origen=pwa",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#0b1020",
  "theme_color": "#5b8cff",
  "lang": "es-ES",
  "dir": "ltr",
  "icons": [
    { "src": "/assets/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/assets/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/assets/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "shortcuts": [
    {
      "name": "Nueva tarea",
      "url": "/tareas/nueva",
      "icons": [{ "src": "/assets/icons/nueva-96.png", "sizes": "96x96" }]
    },
    { "name": "Mis tareas de hoy", "url": "/tareas?filtro=hoy" }
  ]
}

import { Injectable, signal, inject, DOCUMENT } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class InstalacionService {
  private readonly doc = inject(DOCUMENT);
  private evento: any = null;

  /** La interfaz se suscribe a esta señal para mostrar el botón. */
  readonly sePuedeInstalar = signal(false);
  readonly yaInstalada = signal(false);

  constructor() {
    const win = this.doc.defaultView!;

    win.addEventListener('beforeinstallprompt', (e: Event) => {
      // Sin preventDefault, el navegador muestra su propio aviso
      // cuando quiere y perdemos el control del momento.
      e.preventDefault();
      this.evento = e;
      this.sePuedeInstalar.set(true);
    });

    win.addEventListener('appinstalled', () => {
      this.evento = null;
      this.sePuedeInstalar.set(false);
      this.yaInstalada.set(true);
    });

    // Detecta si ya se está ejecutando instalada.
    this.yaInstalada.set(
      win.matchMedia('(display-mode: standalone)').matches,
    );
  }

  async invitar(): Promise<'aceptada' | 'rechazada' | 'no_disponible'> {
    if (!this.evento) return 'no_disponible';

    // prompt() debe llamarse dentro de un gesto del usuario.
    // Si lo llamas desde un temporizador, el navegador lo bloquea.
    await this.evento.prompt();
    const { outcome } = await this.evento.userChoice;

    // El evento es de un solo uso. Hay que descartarlo.
    this.evento = null;
    this.sePuedeInstalar.set(false);

    return outcome === 'accepted' ? 'aceptada' : 'rechazada';
  }
}

import { openDB, DBSchema, IDBPDatabase } from 'idb';

/** Copia local de una tarea, con metadatos de sincronización. */
export interface TareaLocal {
  id: string;                 // uuid; provisional si se creó sin conexión
  titulo: string;
  descripcion: string | null;
  estado: 'pendiente' | 'en_curso' | 'hecha';
  proyectoId: string;
  version: number;            // versión del servidor, para el bloqueo optimista
  actualizadaEn: string;      // ISO 8601
  pendienteDeSubir: boolean;  // hay cambios locales sin confirmar
}

/** Una operación en espera de ser enviada al servidor. */
export interface OperacionPendiente {
  id?: number;                        // autoincremental
  claveIdempotencia: string;          // uuid, viaja en la cabecera
  metodo: 'POST' | 'PATCH' | 'DELETE';
  url: string;
  cuerpo: unknown;
  entidadId: string;
  creadaEn: number;
  intentos: number;
  ultimoError?: string;
}

interface EsquemaTaskFlow extends DBSchema {
  tareas: {
    key: string;
    value: TareaLocal;
    // Los índices permiten consultar sin recorrer todo el almacén.
    indexes: { 'por-proyecto': string; 'por-estado': string };
  };
  cola: {
    key: number;
    value: OperacionPendiente;
    indexes: { 'por-entidad': string };
  };
  meta: { key: string; value: unknown };
}

let promesaDb: Promise<IDBPDatabase<EsquemaTaskFlow>> | null = null;

export function abrirDb() {
  // Memorizamos la promesa, no la base de datos: si dos partes del
  // código llaman a la vez, ambas esperan la MISMA apertura en lugar
  // de abrir dos conexiones que competirían entre sí.
  promesaDb ??= openDB<EsquemaTaskFlow>('taskflow', 1, {
    upgrade(db, versionAnterior) {
      // Las migraciones son incrementales y sin 'break': la caída de
      // un caso al siguiente aplica todos los pasos que faltan a un
      // usuario que llevaba meses sin abrir la aplicación.
      switch (versionAnterior) {
        case 0: {
          const tareas = db.createObjectStore('tareas', { keyPath: 'id' });
          tareas.createIndex('por-proyecto', 'proyectoId');
          tareas.createIndex('por-estado', 'estado');

          const cola = db.createObjectStore('cola', {
            keyPath: 'id', autoIncrement: true,
          });
          cola.createIndex('por-entidad', 'entidadId');

          db.createObjectStore('meta');
        }
        // case 1: aquí irían los cambios de la versión 2, y así
        // sucesivamente. Nunca se borra un caso anterior.
      }
    },

    blocked() {
      // Otra pestaña tiene abierta una versión antigua y bloquea la
      // actualización del esquema. Hay que avisar al usuario.
      console.warn('Cierra las demás pestañas para actualizar TaskFlow.');
    },

    blocking() {
      // Somos NOSOTROS los que bloqueamos a otra pestaña que quiere
      // actualizar. Cerramos para dejarla pasar.
      promesaDb?.then((db) => db.close());
      promesaDb = null;
    },
  });

  return promesaDb;
}

@Injectable({ providedIn: 'root' })
export class CuotaService {
  async estado() {
    if (!navigator.storage?.estimate) return null;

    const { usage = 0, quota = 0 } = await navigator.storage.estimate();
    return {
      usadoMb: +(usage / 1024 / 1024).toFixed(1),
      totalMb: +(quota / 1024 / 1024).toFixed(1),
      porcentaje: quota ? Math.round((usage / quota) * 100) : 0,
    };
  }

  /**
   * Pide que el navegador NO expulse nuestros datos automáticamente.
   * El navegador decide según su propia heurística: si la aplicación
   * está instalada, si el usuario la visita a menudo, si le ha dado
   * permiso de notificaciones... No se puede forzar.
   */
  async pedirPersistencia(): Promise<boolean> {
    if (!navigator.storage?.persist) return false;
    if (await navigator.storage.persisted()) return true;
    return navigator.storage.persist();
  }
}

import { Injectable, signal, inject } from '@angular/core';
import { abrirDb, OperacionPendiente } from './db';

@Injectable({ providedIn: 'root' })
export class ColaService {
  /** Cantidad de operaciones sin subir; la interfaz la muestra. */
  readonly pendientes = signal(0);
  readonly sincronizando = signal(false);

  private vaciadoEnCurso: Promise<void> | null = null;

  async encolar(op: Omit<OperacionPendiente, 'id' | 'creadaEn' | 'intentos'>) {
    const db = await abrirDb();
    await db.add('cola', { ...op, creadaEn: Date.now(), intentos: 0 });
    await this.refrescarContador();

    // Intento inmediato: si hay red, el usuario ni se entera de que
    // ha pasado por una cola.
    if (navigator.onLine) void this.vaciar();
  }

  /**
   * Vacía la cola en orden estricto de llegada.
   *
   * El orden importa: si el usuario creó la tarea A y luego la editó,
   * enviar la edición antes que la creación produce un 404. Por eso
   * NO se paralelizan las operaciones, aunque sea más lento.
   */
  async vaciar(): Promise<void> {
    // Reutilizamos la promesa en curso para que dos disparos
    // simultáneos (el evento 'online' y un temporizador, por ejemplo)
    // no vacíen la cola dos veces a la vez.
    this.vaciadoEnCurso ??= this.vaciarInterno()
      .finally(() => { this.vaciadoEnCurso = null; });
    return this.vaciadoEnCurso;
  }

  private async vaciarInterno(): Promise<void> {
    const db = await abrirDb();
    this.sincronizando.set(true);

    try {
      // Leemos las claves ordenadas: el autoincremental garantiza
      // el orden cronológico de inserción.
      let claves = await db.getAllKeys('cola');

      for (const clave of claves) {
        const op = await db.get('cola', clave);
        if (!op) continue;

        const resultado = await this.enviar(op);

        if (resultado === 'ok' || resultado === 'descartar') {
          await db.delete('cola', clave);
        } else if (resultado === 'reintentar') {
          // Guardamos el intento fallido y PARAMOS. Seguir con las
          // siguientes rompería el orden causal.
          await db.put('cola', { ...op, intentos: op.intentos + 1 });
          break;
        }
      }
    } finally {
      this.sincronizando.set(false);
      await this.refrescarContador();
    }
  }

  private async enviar(op: OperacionPendiente) {
    try {
      const res = await fetch(op.url, {
        method: op.metodo,
        headers: {
          'Content-Type': 'application/json',
          // La clave viaja en la cabecera: el servidor la usa para
          // detectar reenvíos. Ver capítulo 25, sección de idempotencia.
          'Idempotency-Key': op.claveIdempotencia,
        },
        body: op.metodo === 'DELETE' ? undefined : JSON.stringify(op.cuerpo),
      });

      if (res.ok) return 'ok' as const;

      // 409: el servidor tiene una versión más nueva.
      if (res.status === 409) {
        await this.registrarConflicto(op, await res.json());
        return 'descartar' as const;
      }

      // 4xx que no es 408 ni 429: la petición está mal y reintentarla
      // fallará siempre. Descartar y avisar es lo correcto; dejarla en
      // la cola bloquearía todas las operaciones posteriores para
      // siempre.
      if (res.status >= 400 && res.status < 500
          && res.status !== 408 && res.status !== 429) {
        await this.registrarFalloPermanente(op, res.status);
        return 'descartar' as const;
      }

      return 'reintentar' as const;
    } catch {
      // Fallo de red: sigue sin haber conexión.
      return 'reintentar' as const;
    }
  }

  private async refrescarContador() {
    const db = await abrirDb();
    this.pendientes.set(await db.count('cola'));
  }

  private async registrarConflicto(op: OperacionPendiente, cuerpo: unknown) { /* ... */ }
  private async registrarFalloPermanente(op: OperacionPendiente, estado: number) { /* ... */ }
}

@Patch(':id')
async actualizar(
  @Param('id', ParseUUIDPipe) id: string,
  @Body() dto: ActualizarTareaDto,
  @Headers('if-match') etag?: string,
) {
  const tarea = await this.em.findOneOrFail(Tarea, { id });

  // La versión que el cliente creía tener, tomada de la cabecera
  // If-Match según el capítulo 25, o del cuerpo si prefieres.
  const versionCliente = Number(etag?.replace(/"/g, '') ?? dto.version);

  if (versionCliente !== tarea.version) {
    // 409 con el estado ACTUAL del servidor: el cliente necesita
    // saber contra qué está compitiendo para poder mostrar la
    // comparación al usuario. Devolver solo «conflicto» sin datos
    // deja al cliente sin nada que hacer salvo descartar el cambio.
    throw new ConflictException({
      type: 'https://taskflow.example.com/errores/conflicto-version',
      title: 'La tarea fue modificada por otra persona',
      status: 409,
      versionEsperada: versionCliente,
      versionActual: tarea.version,
      estadoActual: this.mapper.aDto(tarea),
      cambiosRechazados: dto,
    });
  }

  this.em.assign(tarea, dto);
  await this.em.flush();   // MikroORM incrementa version solo
  return this.mapper.aDto(tarea);
}

self.addEventListener('sync', (event) => {
  if (event.tag === 'taskflow-cola') {
    // Si la promesa rechaza, el navegador reintentará más tarde
    // con su propia política de retroceso. No la implementes tú.
    event.waitUntil(vaciarColaDesdeServiceWorker());
  }
});

async pedirSincronizacionEnSegundoPlano() {
  const reg = await navigator.serviceWorker?.ready;

  // La API no existe en todos los navegadores. La degradación es
  // sencilla: si no está, nos conformamos con sincronizar cuando la
  // aplicación esté abierta, que cubre la mayoría de los casos.
  if (!reg || !('sync' in reg)) return false;

  try {
    await (reg as any).sync.register('taskflow-cola');
    return true;
  } catch {
    return false;
  }
}

npx web-push generate-vapid-keys

# Public Key:  BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U
# Private Key: UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls

# La pública va en el código de Angular (es pública, no pasa nada).
# La privada va en el gestor de secretos del servidor. NUNCA en git.

import { Entity, PrimaryKey, Property, ManyToOne, Index, Unique } from '@mikro-orm/core';
import { v4 } from 'uuid';
import { Usuario } from '../usuarios/usuario.entity';

@Entity({ tableName: 'suscripciones_push' })
export class SuscripcionPush {
  @PrimaryKey({ type: 'uuid' })
  id: string = v4();

  @ManyToOne(() => Usuario, { deleteRule: 'cascade' })
  @Index()
  usuario!: Usuario;

  /**
   * URL única que identifica el canal de este navegador concreto.
   * Es larga (puede pasar de 500 caracteres), así que 'text'.
   * Única: si el mismo navegador se resuscribe, actualizamos en
   * lugar de duplicar y enviar la notificación dos veces.
   */
  @Property({ type: 'text' })
  @Unique()
  endpoint!: string;

  @Property({ type: 'text' })
  p256dh!: string;   // clave pública del cliente, para cifrar la carga

  @Property({ type: 'text' })
  auth!: string;     // secreto de autenticación

  @Property({ nullable: true })
  agenteUsuario?: string;

  @Property()
  creadaEn: Date = new Date();

  /** Para poder limpiar suscripciones que ya no se usan. */
  @Property({ nullable: true })
  ultimoEnvioCorrecto?: Date;
}

import { Injectable, Logger } from '@nestjs/common';
import { EntityManager } from '@mikro-orm/postgresql';
import { ConfigService } from '@nestjs/config';
import * as webpush from 'web-push';
import { SuscripcionPush } from './suscripcion-push.entity';

interface CargaPush {
  titulo: string;
  cuerpo: string;
  url: string;
  etiqueta?: string;
}

@Injectable()
export class PushService {
  private readonly log = new Logger(PushService.name);

  constructor(
    private readonly em: EntityManager,
    config: ConfigService,
  ) {
    webpush.setVapidDetails(
      // Un contacto real: si tu servidor genera problemas, el
      // operador del servicio push necesita a quién avisar.
      'mailto:soporte@taskflow.example.com',
      config.getOrThrow('VAPID_PUBLIC_KEY'),
      config.getOrThrow('VAPID_PRIVATE_KEY'),
    );
  }

  async enviarAUsuario(usuarioId: string, carga: CargaPush): Promise<void> {
    const suscripciones = await this.em.find(
      SuscripcionPush, { usuario: usuarioId },
    );

    // Un usuario puede tener varios dispositivos. Se envía a todos
    // en paralelo y se recogen los resultados sin que uno tumbe
    // a los demás: allSettled, no all.
    const resultados = await Promise.allSettled(
      suscripciones.map((s) => this.enviarA(s, carga)),
    );

    const fallos = resultados.filter((r) => r.status === 'rejected').length;
    if (fallos) {
      this.log.warn(`Push a ${usuarioId}: ${fallos}/${suscripciones.length} fallaron`);
    }
    await this.em.flush();
  }

  private async enviarA(s: SuscripcionPush, carga: CargaPush) {
    try {
      await webpush.sendNotification(
        { endpoint: s.endpoint, keys: { p256dh: s.p256dh, auth: s.auth } },
        JSON.stringify(carga),
        {
          TTL: 60 * 60 * 24,   // si no se entrega en 24 h, se descarta
          urgency: 'normal',
        },
      );
      s.ultimoEnvioCorrecto = new Date();
    } catch (e: any) {
      // 404 y 410 significan que la suscripción ya no existe:
      // el usuario desinstaló, revocó el permiso o limpió los datos.
      // Hay que BORRARLA. Si no, la tabla crece indefinidamente con
      // canales muertos y cada envío desperdicia una petición.
      if (e.statusCode === 404 || e.statusCode === 410) {
        this.em.remove(s);
        return;
      }
      // 413: la carga es demasiado grande. Ver el aviso más abajo.
      // 429: el servicio push nos está limitando; hay que espaciar.
      throw e;
    }
  }
}

import { Injectable, inject, signal } from '@angular/core';
import { SwPush } from '@angular/service-worker';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Injectable({ providedIn: 'root' })
export class PushService {
  private readonly swPush = inject(SwPush);
  private readonly http = inject(HttpClient);
  private readonly router = inject(Router);

  readonly permiso = signal<NotificationPermission>(
    'Notification' in window ? Notification.permission : 'denied',
  );

  constructor() {
    // Clic en una notificación con la aplicación abierta o al abrirla.
    this.swPush.notificationClicks
      .pipe(takeUntilDestroyed())
      .subscribe(({ notification }) => {
        const url = notification.data?.url;
        if (url) void this.router.navigateByUrl(url);
      });
  }

  get disponible() {
    return this.swPush.isEnabled;
  }

  async activar(): Promise<'ok' | 'denegado' | 'no_disponible'> {
    if (!this.swPush.isEnabled) return 'no_disponible';

    try {
      const sub = await this.swPush.requestSubscription({
        serverPublicKey: environment.vapidPublicKey,
      });

      await firstValueFrom(
        this.http.post('/api/push/suscripciones', sub.toJSON()),
      );
      this.permiso.set('granted');
      return 'ok';
    } catch {
      // requestSubscription rechaza si el usuario deniega el permiso.
      this.permiso.set(Notification.permission);
      return 'denegado';
    }
  }

  async desactivar() {
    const sub = await firstValueFrom(this.swPush.subscription);
    if (!sub) return;
    // Primero avisamos al servidor y luego cancelamos. Al revés,
    // si falla la llamada, dejaríamos un canal muerto en la tabla.
    await firstValueFrom(this.http.request(
      'delete', '/api/push/suscripciones', { body: { endpoint: sub.endpoint } },
    ));
    await sub.unsubscribe();
  }
}

self.addEventListener('push', (event) => {
  const datos = event.data?.json() ?? {};

  event.waitUntil(
    self.registration.showNotification(datos.titulo ?? 'TaskFlow', {
      body: datos.cuerpo,
      icon: '/assets/icons/icon-192.png',
      badge: '/assets/icons/badge-72.png',   // monocromo, para Android

      // 'tag' agrupa: una notificación nueva con el mismo tag
      // SUSTITUYE a la anterior en lugar de apilarse. Imprescindible
      // para no inundar al usuario con veinte avisos del mismo hilo.
      tag: datos.etiqueta ?? 'general',
      renotify: false,

      data: { url: datos.url },
      actions: [
        { action: 'abrir', title: 'Ver tarea' },
        { action: 'hecha', title: 'Marcar como hecha' },
      ],
    }),
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const destino = event.notification.data?.url ?? '/';

  event.waitUntil((async () => {
    if (event.action === 'hecha') {
      await fetch(`/api${destino}/completar`, { method: 'POST' });
      return;
    }

    // Si ya hay una ventana de TaskFlow abierta, la reutilizamos y
    // la enfocamos en lugar de abrir una pestaña más. Abrir siempre
    // una pestaña nueva es un comportamiento que irrita mucho.
    const clientes = await self.clients.matchAll({
      type: 'window', includeUncontrolled: true,
    });
    const abierta = clientes.find((c) => c.url.includes(self.location.origin));

    if (abierta) {
      await abierta.focus();
      abierta.postMessage({ tipo: 'navegar', url: destino });
    } else {
      await self.clients.openWindow(destino);
    }
  })());
});

import { Injectable, inject, signal, ApplicationRef, DOCUMENT } from '@angular/core';
import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
import { concat, interval, first } from 'rxjs';
import { filter } from 'rxjs/operators';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Injectable({ providedIn: 'root' })
export class ActualizacionService {
  private readonly updates = inject(SwUpdate);
  private readonly appRef = inject(ApplicationRef);
  private readonly doc = inject(DOCUMENT);

  /** La interfaz muestra un aviso discreto cuando pasa a true. */
  readonly hayVersionNueva = signal(false);

  iniciar() {
    if (!this.updates.isEnabled) return;

    this.comprobarPeriodicamente();

    this.updates.versionUpdates
      .pipe(
        filter((e): e is VersionReadyEvent => e.type === 'VERSION_READY'),
        takeUntilDestroyed(),
      )
      .subscribe(() => this.hayVersionNueva.set(true));

    // Fallo irrecuperable: el service worker no puede seguir
    // sirviendo esta versión. Recargar es la única salida.
    this.updates.unrecoverable
      .pipe(takeUntilDestroyed())
      .subscribe(() => {
        this.doc.defaultView!.location.reload();
      });
  }

  /** Llamado desde el botón «Actualizar» del aviso. */
  async aplicar() {
    await this.updates.activateUpdate();
    this.doc.defaultView!.location.reload();
  }

  private comprobarPeriodicamente() {
    // El detalle importante: esperar a que la aplicación esté
    // ESTABLE antes de arrancar el intervalo. Un setInterval que
    // empieza en el arranque mantiene a Angular con tareas
    // pendientes para siempre y, con Zone.js, hace que isStable
    // no emita nunca. Eso rompe el renderizado del lado del
    // servidor y las pruebas de extremo a extremo, que esperan
    // a la estabilidad.
    const estable$ = this.appRef.isStable.pipe(first((e) => e === true));
    const cada6h$ = interval(6 * 60 * 60 * 1000);

    concat(estable$, cada6h$)
      .pipe(takeUntilDestroyed())
      .subscribe(() => void this.updates.checkForUpdate());
  }
}

export const versionInterceptor: HttpInterceptorFn = (req, next) => {
  const actualizacion = inject(ActualizacionService);

  // Cada petición anuncia con qué versión del cliente se hizo.
  const conVersion = req.clone({
    setHeaders: { 'X-Cliente-Version': environment.version },
  });

  return next(conVersion).pipe(
    tap((evento) => {
      if (evento instanceof HttpResponse) {
        // El servidor puede responder que este cliente ya no vale.
        if (evento.headers.get('X-Cliente-Obsoleto') === 'true') {
          actualizacion.exigirActualizacion();
        }
      }
    }),
    catchError((e: HttpErrorResponse) => {
      // 426 Upgrade Required: el servidor rechaza esta versión.
      if (e.status === 426) actualizacion.exigirActualizacion();
      return throwError(() => e);
    }),
  );
};

async cerrarSesion() {
  // 1. Avisar al servidor mientras todavía tenemos credenciales.
  await firstValueFrom(this.http.post('/api/auth/logout', {})).catch(() => {});

  // 2. Cancelar la suscripción push de este dispositivo.
  await this.push.desactivar().catch(() => {});

  // 3. Borrar toda la Cache Storage.
  if ('caches' in window) {
    const nombres = await caches.keys();
    await Promise.all(nombres.map((n) => caches.delete(n)));
  }

  // 4. Borrar las bases de datos de IndexedDB.
  //    Cerrar la conexión primero: deleteDatabase se queda bloqueado
  //    indefinidamente si hay una conexión abierta, y sin timeout.
  await cerrarDb();
  await new Promise<void>((resolver) => {
    const req = indexedDB.deleteDatabase('taskflow');
    req.onsuccess = req.onerror = req.onblocked = () => resolver();
  });

  // 5. Almacenamiento síncrono.
  localStorage.clear();
  sessionStorage.clear();

  // 6. Recarga completa: garantiza que no queda estado en memoria
  //    de la sesión anterior en ningún servicio de Angular.
  location.href = '/login';
}

import 'fake-indexeddb/auto';   // sustituye indexedDB por una en memoria

describe('ColaService', () => {
  let cola: ColaService;
  let fetchMock: jest.Mock;

  beforeEach(async () => {
    indexedDB = new IDBFactory();   // base limpia en cada prueba
    fetchMock = jest.fn();
    global.fetch = fetchMock;
    cola = TestBed.inject(ColaService);
  });

  it('vacía la cola en orden estricto de llegada', async () => {
    fetchMock.mockResolvedValue(new Response(null, { status: 200 }));

    await cola.encolar(crearOp('POST', '/api/tareas'));
    await cola.encolar(crearOp('PATCH', '/api/tareas/1'));
    await cola.vaciar();

    const urls = fetchMock.mock.calls.map((c) => c[0]);
    expect(urls).toEqual(['/api/tareas', '/api/tareas/1']);
    expect(cola.pendientes()).toBe(0);
  });

  it('descarta la operación envenenada sin bloquear las siguientes', async () => {
    fetchMock
      .mockResolvedValueOnce(new Response(null, { status: 422 }))
      .mockResolvedValueOnce(new Response(null, { status: 200 }));

    await cola.encolar(crearOp('POST', '/api/tareas'));     // fallará
    await cola.encolar(crearOp('POST', '/api/proyectos'));  // debe pasar
    await cola.vaciar();

    expect(fetchMock).toHaveBeenCalledTimes(2);
    expect(cola.pendientes()).toBe(0);
  });

  it('para al primer error de red y conserva el resto', async () => {
    fetchMock.mockRejectedValue(new TypeError('Failed to fetch'));

    await cola.encolar(crearOp('POST', '/api/tareas'));
    await cola.encolar(crearOp('POST', '/api/proyectos'));
    await cola.vaciar();

    // Solo se intentó la primera: parar preserva el orden causal.
    expect(fetchMock).toHaveBeenCalledTimes(1);
    expect(cola.pendientes()).toBe(2);
  });
});

import { test, expect } from '@playwright/test';

test('crea una tarea sin conexión y se sincroniza al volver', async ({ page, context }) => {
  await page.goto('/tareas');
  // Esperar a que el service worker controle la página; sin esto la
  // prueba es intermitente porque la primera carga no está controlada.
  await page.evaluate(() => navigator.serviceWorker.ready);
  await page.reload();

  await context.setOffline(true);
  await expect(page.getByRole('status')).toContainText('Sin conexión');

  await page.getByRole('button', { name: 'Nueva tarea' }).click();
  await page.getByLabel('Título').fill('Revisar el informe trimestral');
  await page.getByRole('button', { name: 'Guardar' }).click();

  // Aparece al instante, marcada como pendiente.
  const fila = page.getByRole('row', { name: /Revisar el informe/ });
  await expect(fila).toBeVisible();
  await expect(fila.getByTestId('pendiente-subir')).toBeVisible();

  await context.setOffline(false);
  await expect(fila.getByTestId('pendiente-subir')).toBeHidden({ timeout: 15_000 });

  // Y sobrevive a una recarga completa: está en el servidor.
  await page.reload();
  await expect(page.getByRole('row', { name: /Revisar el informe/ })).toBeVisible();
});