Web Share API con Claude Code en producción

La Web Share API es una API del navegador que permite abrir la hoja nativa de compartir del sistema operativo y enviar un título, un texto, una URL y, en algunos entornos, archivos al destino que elija el usuario. En palabras simples, convierte el botón de compartir de una página web en una experiencia parecida a la de una aplicación móvil. En lugar de adivinar si la persona prefiere X, WhatsApp, correo, Slack o una app de notas, el sitio deja que el dispositivo muestre las opciones reales disponibles.

Esa comodidad necesita una arquitectura de producción. La documentación de MDN sobre Web Share API indica que la función tiene disponibilidad limitada y requiere un contexto seguro. La página de Navigator.share() también explica la activación por gesto del usuario, los errores, la política de permisos web-share y el comportamiento de cancelación. Por eso, cuando pidas a Claude Code que añada un botón de compartir, no basta con una llamada a navigator.share(data). El pedido debe incluir detección de soporte, fallback al portapapeles, eventos de analítica, texto localizado y conexión con la conversión.

Compartir no es solo una acción social. En un sitio de contenidos, una PWA o una página de formación, muchas conversiones empiezan con un paso pequeño: enviar el artículo a un equipo, guardar el enlace en una nota, compartir una página de precios con quien aprueba el presupuesto o volver más tarde desde una PWA instalada. Este artículo integra la Web Share API con PWA, analítica, SEO y la ruta de formación en Claude Code.

Actualización de producción 2026

El primer cambio de mentalidad es tratar el botón de compartir como una continuación de la lectura, no como decoración. Si el lector acaba de encontrar una solución útil, el botón debe reducir la fricción para enviarla al canal correcto. Si está evaluando una formación, debe poder mandar la página a su responsable. Si está usando una PWA, debe poder compartir la pantalla actual sin buscar la barra de direcciones.

Para que Claude Code genere algo útil, el prompt tiene que describir el workflow completo. Pide que compruebe navigator.share, que respete HTTPS, que no muestre un error agresivo cuando el usuario cierre la hoja de compartir, que copie título, texto y URL cuando la API no esté disponible, y que registre eventos separados para compartir nativo y fallback. También conviene pedir que el texto compartido use el mismo enfoque que el título SEO y la description, porque una promesa diferente en cada canal reduce la confianza.

La API tampoco revela a qué aplicación se compartió el contenido. No puedes saber si el usuario eligió WhatsApp, correo, LinkedIn o una app interna. Diseña la medición alrededor de lo observable: clic en el botón, intento de compartir nativo, cancelación, copia al portapapeles, sesiones de retorno, lanzamientos de PWA y formularios iniciados. Es una forma más honesta de medir y reduce el risk de prometer datos que la plataforma no entrega.

En lectores PWA, el botón pesa más. Al abrir una PWA desde la pantalla de inicio, la interfaz del navegador queda reducida y los controles internos guían la experiencia. Un botón accesible cerca del título, del final del artículo o de una lista completada puede convertir una lectura individual en una conversación de equipo.

Use case reales

El primer use case es compartir artículos técnicos desde móvil. Una persona lee una guía de Claude Code y quiere enviarla a su chat de trabajo. Los iconos fijos de redes dejan fuera muchos destinos locales. La hoja nativa permite usar las apps instaladas y reduce pasos. El payload debe incluir un título claro, una frase de valor y la URL canónica.

El segundo use case es distribuir lecciones dentro de una PWA. Un equipo puede instalar una PWA de aprendizaje y avanzar por ejercicios durante varios días. Cuando un paso es útil para otra persona, el botón comparte la URL exacta. Aquí se conectan la guía PWA y la Web Share API: una facilita volver y la otra facilita difundir.

El tercer use case es una página B2B de evaluación. Un lector llega desde SEO a una comparación, una tabla de costes o una guía de implementación, pero tal vez no decide el presupuesto. Un botón cerca de la tabla o del CTA permite reenviar la página a quien decide. Esta acción está más cerca de la conversión que de la vanidad social.

El cuarto use case es formación y consultoría. En la página de training, muchas personas necesitan compartir el temario con un responsable antes de reservar. En navegadores compatibles se abre la hoja nativa; en escritorios corporativos se copia una propuesta breve con URL. La experiencia se mantiene aunque el navegador no soporte la API.

El quinto use case son resultados generados. Si una herramienta de Claude Code crea un informe, un diagrama o un PDF, primero comprueba navigator.canShare({ files }). Si los archivos no son compartibles, comparte una página de recurso con permisos. Suele ser mejor para seguridad, caducidad y analítica.

Arquitectura de soporte y fallback

La Web Share API debe entrar como mejora progresiva. El usuario no debería perder el botón solo porque su navegador no soporte el camino nativo. La tabla resume una arquitectura práctica para entregar a Claude Code como especificación.

Situación	Detección	Acción principal	Fallback
Navegador móvil compatible	typeof navigator.share === "function"	Abrir la hoja nativa de compartir	Copiar título, texto y URL si falla
Escritorio o navegador no compatible	No existe navigator.share	Mantener el mismo botón visible	Copiar el texto y mostrar enlaces sociales si hace falta
Contexto no seguro	window.isSecureContext es false	Usar HTTPS en producción	Mostrar UI de copia; probar localmente con localhost
Compartir archivos	navigator.canShare({ files })	Enviar imágenes, PDFs o exportaciones	Compartir una URL de descarga o recurso
iframe o página embebida	Puede bloquearse por web-share	Permitir la política desde el padre	Abrir la página superior y compartir allí
Cancelación del usuario	Nombre de error AbortError	Tratar como cancelación normal	No mostrar banner de error
Datos inválidos	TypeError o DataError	Registrar forma del payload y tipo de página	Copiar una URL limpia

Esta tabla evita discusiones ambiguas en revisión. El comportamiento puede variar entre Android, iOS, escritorio y PWA, pero la promesa del producto es la misma: si el camino nativo no funciona, el usuario todavía puede copiar y compartir.

Código ejecutable con portapapeles

El ejemplo no depende de React ni de un framework. Puedes pegarlo en una página estática, en un script cliente de Astro o en una shell PWA. La llamada a navigator.share() ocurre dentro del clic, y el fallback usa Clipboard API solo en contexto seguro.

<button data-share-button type="button">Compartir este artículo</button>
<p data-share-status aria-live="polite"></p>

const sharePayload = {
  title: document.title,
  text: "Guía práctica para aplicar Web Share API con Claude Code.",
  url: window.location.href,
};

const button = document.querySelector("[data-share-button]");
const status = document.querySelector("[data-share-status]");

function setShareStatus(message) {
  if (status) status.textContent = message;
}

function buildShareText(data) {
  return [data.title, data.text, data.url].filter(Boolean).join("\n\n");
}

async function copyToClipboardFallback(data) {
  const text = buildShareText(data);

  if (navigator.clipboard && window.isSecureContext) {
    await navigator.clipboard.writeText(text);
    setShareStatus("Enlace copiado. Pégalo en cualquier aplicación.");
    return;
  }

  window.prompt("Copia este texto para compartir", text);
  setShareStatus("Copia el texto manualmente y pégalo donde quieras.");
}

button?.addEventListener("click", async () => {
  const data = {
    ...sharePayload,
    url: new URL(sharePayload.url, window.location.href).href,
  };

  if (navigator.share) {
    try {
      await navigator.share(data);
      setShareStatus("Se abrió la hoja de compartir.");
      return;
    } catch (error) {
      if (error.name === "AbortError") {
        setShareStatus("Compartir cancelado.");
        return;
      }
      console.warn("navigator.share failed. Using clipboard fallback.", error);
    }
  }

  try {
    await copyToClipboardFallback(data);
  } catch (error) {
    console.error("Clipboard fallback failed.", error);
    setShareStatus("No se pudo copiar. Usa la barra de direcciones como último recurso.");
  }
});

Para medirlo con el patrón de analítica, separa share_click, share_native_opened, share_cancelled y share_clipboard_fallback. No intentes inferir la app elegida porque la API no entrega ese dato.

Pitfalls y failure modes

El primer failure es llamar a navigator.share() fuera de un gesto directo. Si el clic abre un modal, espera una petición larga y luego comparte, algunos navegadores pueden perder la activación temporal. Prepara el título, el texto y la URL antes de que el usuario pulse el botón final.

El segundo error es tratar AbortError como fallo del producto. Muchas veces solo significa que el usuario cerró la hoja de compartir. Un mensaje discreto es suficiente. Reserva los errores visibles para fallos de portapapeles, datos inválidos o bloqueo por permisos.

El tercer risk es usar un texto compartido demasiado largo. Párrafos completos, demasiados hashtags o URLs llenas de parámetros reducen la claridad. Mejor: título corto, beneficio en una frase y URL canónica. También revisa que la imagen OGP sea coherente.

El cuarto problema es compartir archivos sin comprobar soporte. Antes de enviar imágenes o PDFs, usa navigator.canShare({ files }). Si falla, comparte una página de descarga. En productos de formación, esa página además permite mantener permisos y medir interés.

Checklist de despliegue

• Definir title, text y canonical URL por tipo de página.
• Mantener el botón aunque no exista navigator.share.
• Probar HTTPS, localhost, móvil, escritorio y PWA instalada.
• Tratar AbortError como cancelación.
• Verificar archivos con navigator.canShare({ files }).
• Alinear texto compartido con SEO, description y OGP.
• Separar eventos nativos y fallback en analítica.
• Colocar un CTA de formación cerca de la última oportunidad de compartir.
• Revisar etiquetas accesibles y estado aria-live.
• Comprobar vista previa social e iconos PWA.

CTA de monetización

El botón de compartir debe ayudar a que el contenido llegue a más personas del equipo. Después de enseñar la implementación, el CTA natural es ofrecer ayuda para llevar el mismo sistema a producción: Web Share API, PWA, analítica y SEO juntos. Para eso, enlaza a la formación en Claude Code con una frase concreta, no con un banner genérico.

En esta actualización verifiqué la guía contra MDN y reorganicé el contenido alrededor de contexto seguro, gesto del usuario, permisos, cancelación, archivos y fallback. El resultado práctico es un sistema de compartir medible, útil para lectores PWA y preparado para conversión.