Fecha de publicación: 30 de abril de 2025
Celebración: Esta función web ahora está disponible en los tres motores de navegador principales y se convierte en el modelo de referencia disponible desde el 30 de marzo de 2025.
La API de Async Clipboard facilitó mucho el trabajo con el portapapeles. En lugar de los métodos anteriores para administrar el portapapeles, ahora puedes llamar a navigator.clipboard.writeText() para el contenido de texto sin formato o a navigator.clipboard.write() para "casi" todo lo demás, como imágenes, contenido textual o HTML.
Sin embargo, hasta ahora, falta cuantificar el “casi”. Por ejemplo, no podrías saber si la API admitía SVG hasta que lo intentaras y, en caso de que no fuera así, detectarías la excepción que se generó. Esta no era una forma muy ergonómica de determinar la compatibilidad, por lo que se especificó la función estática ClipboardItem.supports().
La función ahora alcanzó el estado Disponible recientemente en Baseline, lo que significa que trabajar con el portapapeles es aún mejor. Para saber si un navegador admite un formato determinado, pasa el tipo de MIME del formato que te interesa a la función.
const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."
Antes, escribí “casi” todo lo demás, y aquí es donde se pone realmente interesante. Los formatos personalizados web te permiten trabajar con formatos que el navegador no admite de forma nativa. Por ejemplo, de forma predeterminada, el navegador no admite imágenes AVIF.
const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."
Sin embargo, si usas formatos personalizados web, puedes trabajar con imágenes AVIF y copiarlas y pegarlas libremente, siempre y cuando la parte receptora también sepa cómo manejar el formato personalizado web.
const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."
Gracias a la función ClipboardItem.supports(), ahora también puedes detectar correctamente la situación de compatibilidad del portapapeles para el formato personalizado web y asegurarte de que funcione.
if (ClipboardItem.supports('web image/avif')) {
// Fetch remote AVIF image and obtain its blob representation.
const blob = await fetch('image.avif').then((response) => response.blob());
try {
// Write the image data to the clipboard, prepending the blob's actual
// type (`"image/avif"` with the string `"web "`, so it becomes
// `"web image/avif"`.
const clipboardItem = new ClipboardItem({
'web image/avif': blob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
}
Ahora que la función ClipboardItem.supports() está disponible como Baseline, los desarrolladores web pueden detectar de forma confiable la compatibilidad del portapapeles con varios tipos de MIME, incluidos los formatos personalizados web. Esta mejora hace que trabajar con el portapapeles sea más sólido y predecible, lo que mejora la experiencia del usuario en todos los navegadores.