Los botones para compartir en redes sociales solían significar cargar cinco scripts de terceros, cada uno con su propio tarro de galletas. La API Web Share hace todo el trabajo con una llamada a la propia hoja del sistema operativo, y la postura de privacidad mejora con ello.
const btn = document.querySelector("#share");
btn.addEventListener("click", async () => {
const payload = {
title: document.title,
text: "Worth a read:",
url: location.href,
};
if (navigator.share) {
try { await navigator.share(payload); } catch { /* dismissed */ }
} else {
await navigator.clipboard.writeText(location.href);
announce("Link copied"); // your own toast or status region
}
});Las restricciones, expresadas claramente
- Solo contexto seguro: existe en https, como lo son todos los sitios importantes.
- Se requiere gesto del usuario: la llamada debe estar dentro de una acción real del usuario, exactamente como lo proporciona el botón.
- Los datos que pasa son los que recibe la aplicación de destino, título, texto, URL; Los archivos también son compatibles cuando la plataforma lo permite.
- El despido es un AbortError y está bien; trátelo como silencio en lugar de como fracaso.
La alternativa que respeta a todos
- Verificación de funciones con navigator.share en el código, no mediante una cadena de agente de usuario; Los navegadores cambian semanalmente.
- Escritura en el portapapeles como alternativa universal: la URL llega al portapapeles del lector con un comportamiento de no sorpresa por parte de su brindis.
- Mantenga como máximo un cambio de estado visual: un enlace copiado y un brindis, y no más bytes de script que el fragmento anterior.
- Anuncie a la tecnología de asistencia con su brindis o punto de referencia de estado; un trabajo de copia silenciosa es una solicitud de soporte para lectores de pantalla.
Un pequeño botón, el sistema operativo hace el resto y cinco scripts se eliminan en lugar de enviarse. Aritmética muy buena.