Web Share API: adiós a los botones que adivinan tus aplicaciones
Los iconos de compartir de cada blog son una apuesta al vacío. El navegador ya puede preguntarle al sistema operativo qué apps tiene el usuario y mostrar el menú real.
Toda página con contenido tiene, al final, la misma fila de iconos: el pájaro que se rebautizó hace dos años, una 'f' en un círculo, un enlace para copiar. Alguno programó esa fila una vez, con los servicios que importaban entonces, y desde entonces miente a cada visitante. No sabe si tienes Twitter (perdón, X) instalado, ni si prefieres mandarte el enlace por WhatsApp o por Notas. Te enseña cinco botones y espera que uno acierte.
El reemplazo lógico es preguntarle al sistema operativo. Esa API se llama Web Share API y existe desde hace años, pero muchos desarrolladores la ignoraron porque funcionaba a medias. Ya no: permite abrir la hoja de compartir nativa del dispositivo, con las aplicaciones reales que usa el lector, y además puede compartir archivos, algo que la fila de iconos jamás conseguirá.
El problema de fondo
La solución fácil es ir añadiendo iconos: primero WhatsApp, luego Threads, después Reddit. Cada uno exige su propia URL de compartir, copiada una vez de Stack Overflow. Funciona, en el sentido de que al pulsar se abre algo, pero es una carga de mantenimiento sin techo. Cada nueva red significa añadir código; cada red que muere o se renombra obliga a rastrear el esquema antiguo por todo el proyecto.
Y por mucho que añadas, la fila es finita y la lista de aplicaciones del teléfono no lo es. Además, un enlace solo puede enlazar: no hay icono para compartir un PDF generado en el momento o una captura. Las etiquetas <a> no pueden transportar archivos.
Lo que hace Web Share API
La solución es llamar a navigator.share(), pasarle un objeto con título, texto y URL, y dejar que el sistema operativo muestre la hoja nativa. El código es directo:
async function compartirPagina() {
try {
await navigator.share({
title: document.title,
text: 'Vale la pena leer: ',
url: location.href
});
} catch (err) {
console.error(`${err.name}: ${err.message}`);
}
}
botonCompartir.addEventListener('click', compartirPagina);
Requiere contexto seguro (HTTPS o localhost) y un gesto del usuario, así que debe ir en un manejador de clic, no al cargar la página.
Compartir archivos: la ventaja definitiva
navigator.share() acepta también un array files, y si el navegador lo soporta, puedes pasar un objeto File real: una imagen generada en un <canvas>, un PDF creado en el cliente, una captura. Ninguna etiqueta <a> ha podido hacer eso; un enlace solo apunta, nunca lleva el contenido.
Como el soporte de archivos varía según plataforma y navegador, usa navigator.canShare() para comprobarlo. Es síncrono y devuelve un booleano:
const datos = {
files: [imagenGenerada],
title: 'Gráfico generado'
};
if (navigator.canShare?.(datos)) {
await navigator.share(datos);
} else {
// Enlace de descarga como alternativa
}
No intentes adivinar una lista de tipos MIME válidos: la especificación deja esa decisión al navegador y al sistema operativo. canShare() es la única fuente fiable.
El error que no es error
Casi todo ejemplo apresurado gestiona así el rechazo de la promesa:
navigator.share(datos).catch(() => {
mostrarAviso('No se ha podido compartir. Inténtalo de nuevo.');
});
Haz la prueba: pulsa compartir y cierra la hoja tocando fuera. Ese aviso aparecerá, y el usuario no ha hecho nada malo. Cerrar la hoja rechaza la promesa con un AbortError, que no es un fallo sino la acción más común: mucha gente abre la hoja solo para ver qué hay.
navigator.share(datos).catch((err) => {
if (err.name === 'AbortError') return; // solo cerró la hoja
mostrarAviso('No se ha podido compartir. Inténtalo de nuevo.');
});
La convivencia necesaria
Comprueba siempre si navigator.share existe antes de usarlo y mantén una alternativa para navegadores antiguos. Ahí es donde la fila de iconos tradicional todavía tiene sentido: como plan B, no como primera opción. Cuando el usuario tenga la API, verá su menú real, con las aplicaciones que de verdad usa. Y sin iconos que quedan obsoletos cada dos años.
