Pubblicata: 30 aprile 2025
Festeggiamo: questa funzionalità web è ora disponibile in tutti e tre i principali motori dei browser e diventa Base di riferimento appena disponibile a partire dal 30 marzo 2025.
L'API Async Clipboard ha semplificato notevolmente il lavoro con la clipboard rispetto al passato. Anziché utilizzare i metodi precedenti per gestire la clipboard, ora puoi chiamare navigator.clipboard.writeText() per i contenuti di testo normale o navigator.clipboard.write() per "quasi" tutti gli altri contenuti, come immagini, contenuti di testo o HTML.
Finora, però, mancava un elemento per quantificare il "quasi". Ad esempio, non potevi sapere se l'API supportava SVG finché non avevi provato e, in caso di mancata compatibilità, avevi rilevato l'eccezione generata. Non era un modo molto ergonomico per determinare il supporto, motivo per cui è stata specificata la funzione statica ClipboardItem.supports().
La funzione ha ora raggiunto lo stato Baseline Newly available (Base di riferimento appena disponibile), il che significa che il lavoro con la clipboard è ancora più efficiente. Per sapere se un browser supporta un determinato formato, passa alla funzione il tipo MIME del formato che ti interessa.
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."
In precedenza, scrivevo "quasi" tutto il resto, ed è qui che diventa davvero interessante. I formati personalizzati web ti consentono di utilizzare formati non supportati nativamente dal browser. Ad esempio, per impostazione predefinita, il browser non supporta le immagini 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."
Tuttavia, utilizzando i formati personalizzati web, puoi lavorare con le immagini AVIF e copiarle e incollarle liberamente, a condizione che la parte ricevente sappia anche gestire il formato personalizzato 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."
Grazie alla funzione ClipboardItem.supports(), ora puoi rilevare correttamente la situazione di supporto della clipboard anche per il formato personalizzato web e assicurarti che funzioni.
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);
}
}
Ora che la funzione ClipboardItem.supports() è disponibile come riferimento, gli sviluppatori web possono rilevare in modo affidabile il supporto della clipboard per vari tipi MIME, inclusi i formati personalizzati web. Questo miglioramento rende l'utilizzo della clipboard più affidabile e prevedibile, migliorando l'esperienza utente su tutti i browser.