Publicado em 30 de abril de 2025
Comemoração: esse recurso da Web agora está disponível nos três principais mecanismos de navegação e será lançado como baseline a partir de 30 de março de 2025.
A API Async Clipboard tornou o trabalho com a área de transferência muito mais fácil do que antes. Em vez de métodos anteriores para gerenciar a área de transferência, agora você pode chamar navigator.clipboard.writeText() para conteúdo de texto simples ou navigator.clipboard.write() para "quase" tudo, como imagens, conteúdo textual ou HTML.
Até agora, faltava quantificar o "quase". Por exemplo, você não sabia se a API oferecia suporte a SVG até tentar e, em caso de incompatibilidade, capturar a exceção gerada. Essa não era uma maneira muito ergonômica de determinar o suporte, e por isso a função estática ClipboardItem.supports() foi especificada.
A função agora alcançou o status "Disponível", o que significa que o trabalho com a área de transferência ficou ainda melhor. Para saber se um navegador oferece suporte a um determinado formato, transmita o tipo MIME do formato de seu interesse para a função.
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, eu escrevia quase tudo, e é aí que as coisas ficam realmente interessantes. Os formatos personalizados da Web permitem trabalhar com formatos que o navegador não oferece de forma nativa. Por exemplo, por padrão, o navegador não oferece suporte a imagens 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."
No entanto, ao usar formatos personalizados da Web, você pode trabalhar com imagens AVIF e copiá-las e colá-las livremente, desde que a parte receptora também saiba como lidar com o formato personalizado da 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."
Graças à função ClipboardItem.supports(), agora você pode detectar corretamente a situação de suporte à área de transferência para o formato personalizado da Web e garantir que ele 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);
}
}
Com a função ClipboardItem.supports() agora disponível como padrão, os desenvolvedores da Web podem detectar com segurança o suporte à área de transferência para vários tipos MIME, incluindo formatos personalizados da Web. Esse aprimoramento torna o trabalho com a área de transferência mais robusto e previsível, melhorando a experiência do usuário em todos os navegadores.