पब्लिश करने की तारीख: 30 अप्रैल, 2025
खुशी की बात: यह वेब सुविधा अब तीनों मुख्य ब्राउज़र इंजन में उपलब्ध है. साथ ही, यह 30 मार्च, 2025 से बेसलाइन के तौर पर उपलब्ध होगी.
Async Clipboard API की मदद से, क्लिपबोर्ड का इस्तेमाल करना पहले के मुकाबले काफ़ी आसान हो गया है. क्लिपबोर्ड को मैनेज करने के पुराने तरीकों के बजाय, अब सादे टेक्स्ट के लिए navigator.clipboard.writeText() या इमेज, टेक्स्ट कॉन्टेंट या एचटीएमएल जैसी "लगभग" हर चीज़ के लिए navigator.clipboard.write() का इस्तेमाल किया जा सकता है.
हालांकि, अब तक "लगभग" की संख्या का पता नहीं चल पाया था. उदाहरण के लिए, आपको तब तक यह पता नहीं चलता कि एपीआई में SVG काम करता है या नहीं, जब तक आपने इसे आज़मा न लिया हो. इसके बाद, अगर एपीआई में SVG काम नहीं करता है, तो आपको उस अपवाद का पता चलता है जो तब जनरेट होता है. यह सुविधा उपलब्ध है या नहीं, यह पता लगाने का यह तरीका बहुत आसान नहीं था. इसलिए, स्टैटिक ClipboardItem.supports() फ़ंक्शन को शामिल किया गया.
यह फ़ंक्शन अब बेसलाइन के तौर पर 'हाल ही में उपलब्ध' स्टेटस पर पहुंच गया है. इसका मतलब है कि क्लिपबोर्ड के साथ काम करना और भी बेहतर हो गया है. यह जानने के लिए कि कोई ब्राउज़र किसी फ़ॉर्मैट के साथ काम करता है या नहीं, फ़ंक्शन में उस फ़ॉर्मैट का MIME टाइप डालें.
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."
इससे पहले, मैंने "लगभग" सब कुछ लिखा था. यह बात तब दिलचस्प हो जाती है, जब मैं आपको बताऊं कि मैंने क्या नहीं लिखा. वेब के कस्टम फ़ॉर्मैट की मदद से, उन फ़ॉर्मैट का इस्तेमाल किया जा सकता है जो ब्राउज़र में नेटिव तौर पर काम नहीं करते. उदाहरण के लिए, डिफ़ॉल्ट रूप से ब्राउज़र में 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."
हालांकि, वेब कस्टम फ़ॉर्मैट का इस्तेमाल करके, AVIF इमेज का इस्तेमाल किया जा सकता है और उन्हें आसानी से कॉपी करके चिपकाया जा सकता है. ऐसा तब तक किया जा सकता है, जब तक कि इमेज पाने वाले व्यक्ति को वेब कस्टम फ़ॉर्मैट को इस्तेमाल करने का तरीका पता हो.
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."
ClipboardItem.supports() फ़ंक्शन की मदद से, अब वेब कस्टम फ़ॉर्मैट के लिए क्लिपबोर्ड की सहायता की स्थिति का पता लगाया जा सकता है. साथ ही, यह भी पक्का किया जा सकता है कि यह काम कर रहा है.
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);
}
}
ClipboardItem.supports() फ़ंक्शन अब बेसलाइन के तौर पर उपलब्ध है. इसकी मदद से, वेब डेवलपर अलग-अलग MIME टाइप के लिए क्लिपबोर्ड की सहायता का पता लगा सकते हैं. इनमें वेब के कस्टम फ़ॉर्मैट भी शामिल हैं. इस बेहतर सुविधा की मदद से, क्लिपबोर्ड का इस्तेमाल ज़्यादा आसान और बेहतर तरीके से किया जा सकता है. साथ ही, सभी ब्राउज़र पर उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.