Deja de Instalar Librerías: 10 APIs del Navegador que Ya Resuelven tus Problemas
Publicado originalmente por Sylwia Laskowska - DEV Community
La plataforma web es mucho más poderosa de lo que la mayoría de los desarrolladores se dan cuenta — y cada año gana silenciosamente nuevos superpoderes.
A veces elegir un tema es más difícil que escribir el artículo en sí.
Cuando pensé en qué escribir esta semana, solo dos tipos de ideas me vinieron a la mente:
o potenciales éxitos, o análisis técnicos profundos.
Pero quería algo más ligero. Aún técnico, aún útil. Pero no un agujero de conejo de investigación de 3 días.
Y como genuinamente me encanta explorar lo que el navegador puede hacer (y hasta dónde podemos llevarlo), llegué a un tema astuto: APIs Web subutilizadas.
Algunos de estos podrían ser pan de cada día para ti.
Pero estoy bastante seguro de que al menos algunos harán que alguien diga “¿espera, ¿esto existe?!” 
Y si disfrutas temas de tecnología de punta y resulta que estás en Italia este abril — ven a jsday.it, donde estaré hablando sobre WebGPU + WASM 
Bien, suficiente introducción. Comencemos.
Aquí hay 10 APIs del navegador que merecen mucho más amor.
1) API Structured Clone
Tengo una relación de amor-odio con esta.
Durante años, una de mis preguntas favoritas de entrevista para hacer a candidatos era:
“¿Cómo copias un objeto?”
Podías aprender mucho de la respuesta:
- ¿Entienden las referencias?
- ¿Conocen
Object.assign, spread, trucos con JSON? - ¿Mencionan librerías?
- ¿Entran en pánico?
¿Ahora?
const copy = structuredClone(original);
Boom. Copia profunda perfecta.
Parte de mí está feliz.
Parte de mí ya extraña esa pregunta de entrevista.
Extras agradables
- Funciona con
Map,Set,Date,Blob,File,ArrayBuffer - Maneja referencias circulares (no más explosiones de JSON stringify
) - NO clona funciones
Soporte: Navegadores modernos (Chrome, Firefox, Safari, Edge). Seguro para producción.
2) API Performance
Muy subestimada.
Hablamos mucho sobre rendimiento. Instalamos herramientas. Ejecutamos Lighthouse. Debatimos optimizaciones.
Pero a veces solo quieres verificar:
“¿Es A realmente más rápido que B, o estoy sobre-ingenierizando?”
performance.mark("start");
// código a medir
performance.mark("end");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));
Perfecto para:
- micro-benchmarks
- verificar si un Worker o WASM vale la pena
- verificar la realidad de tus suposiciones
Porque a veces la versión “optimizada” es más lenta
Soporte: Excelente en todos los navegadores modernos.
3) API Page Visibility
Detecta si la pestaña está activa.
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
video.pause();
}
});
Hablando en serio:
Los usuarios abrirán tu app, luego cambiarán de pestaña durante 20 minutos.
O 2 horas.
O para siempre.
Casos de uso:
- pausar videos
- detener polling
- reducir uso de CPU
- análisis más limpios
Tu backend (y la vida útil de la batería) te lo agradecerán.
Soporte: Todos los navegadores modernos.
4) ResizeObserver
Finalmente — observar tamaño de elemento, no solo tamaño de ventana.
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
console.log(entry.contentRect.width);
}
});
ro.observe(element);
Si alguna vez construiste componentes responsivos, gráficos o dashboards, probablemente escribiste algo de lógica de resize maldita en el pasado.
Esta API se siente como el navegador diciendo:
“Relájate, yo me encargo.”
Soporte: Navegadores modernos, ampliamente disponible.
5) IntersectionObserver
El hermano de ResizeObserver.
Verifica si un elemento está en el viewport.
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("¡Visible!");
}
});
});
io.observe(element);
Increíble para:
- scroll infinito
- lazy loading
- animaciones de scroll
Cualquiera que implementó scroll infinito manualmente una vez…
nunca quiere hacerlo de nuevo
Soporte: Todos los navegadores modernos.
6) AbortController
Muchos desarrolladores lo conocen por fetch…
Pero puede cancelar más que solo fetch.
const controller = new AbortController();
fetch(url, { signal: controller.signal });
// después
controller.abort();
También puedes usarlo para:
- event listeners
- streams
- cualquier API abortable
Aún mejor:
Una señal puede cancelar múltiples operaciones.
Limpio, escalable, y muy amigable con “base de código madura”.
Soporte: Todos los navegadores modernos.
7) API Idle Detection
Page Visibility te dice si la pestaña está activa.
Idle Detection te dice si el humano está activo.
const detector = new IdleDetector();
await detector.start();
detector.addEventListener("change", () => {
console.log(detector.userState);
});
Significado:
El usuario podría tener tu app abierta…
pero en realidad está haciendo café 
o en una reunión.
Casos de uso:
- logout automático
- estado “ausente”
- optimizaciones de fondo
Sí, puedes detectar si el usuario se fue de la computadora.
Un poco espeluznante. Muy útil
Soporte: Principalmente basados en Chromium. Requiere permiso.
8) API BroadcastChannel
Comunicación fácil entre múltiples pestañas.
const channel = new BroadcastChannel("app");
channel.postMessage("logout");
channel.onmessage = e => {
console.log(e.data);
};
Excelente para:
- sincronización de logout
- estado de autenticación
- lógica de sesión compartida
Sorprendentemente práctico en apps reales donde los usuarios abren 5 pestañas “por si acaso”.
Soporte: Navegadores modernos. Safari se unió después pero lo soporta.
9) API Web Locks
El primo de BroadcastChannel.
Previene trabajo duplicado entre pestañas.
navigator.locks.request("data-lock", async lock => {
await fetchData();
});
Ejemplo:
- solo una pestaña obtiene notificaciones
- evita spam en el backend
- coordina recursos compartidos
Se siente muy “sistemas distribuidos se encuentran con frontend”.
Soporte: Principalmente Chromium. No universal.
10) API File System Access
Sí — acceso real al sistema de archivos desde el navegador.
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
Excelente para:
- editores web
- herramientas de importación/exportación
- apps para usuarios avanzados
La primera vez que la usas, se siente ligeramente ilegal.
Como “¿realmente se nos permite hacer esto en la web?”
Soporte: Pesado en Chromium. Limitado en otros lugares.
Verificación de Realidad 
Muchas de estas APIs están bien soportadas en navegadores modernos.
Pero algunas (Idle Detection, File System Access, Web Locks) aún son céntricas en Chromium.
Así que siempre verifica compatibilidad antes de comprometerte completamente.
Pero ¿simplemente saber que estas existen?
Eso ya te da una ventaja.
La plataforma web evoluciona rápido.
A veces la “nueva tecnología” no es un framework — es una característica nativa del navegador que ha estado ahí silenciosamente.
¿Cuál es tu API Web subestimada favorita de la que nadie habla?