تابع ClipboardItem.supports() اکنون Baseline به تازگی در دسترس است

توماس اشتاینر

تاریخ انتشار: 30 آوریل 2025

جشن: این ویژگی وب اکنون در هر سه موتور مرورگر اصلی موجود است و از 30 مارس 2025 به تازگی در دسترس است.

Async Clipboard API کار با کلیپ بورد را بسیار ساده تر از گذشته کرده است. به جای روش های قبلی برای مدیریت کلیپ بورد، اکنون می توانید navigator.clipboard.writeText() را برای محتوای متن ساده یا navigator.clipboard.write() را برای "تقریبا" هر چیز دیگری مانند تصاویر، محتوای متنی یا HTML فراخوانی کنید.

با این حال، یک قطعه گم شده تا کنون، کمی کردن "تقریبا" بود. به عنوان مثال، تا زمانی که امتحان نکردید، نمی‌توانید بفهمید که آیا API از 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() اکنون Baseline به تازگی در دسترس است، توسعه دهندگان وب می توانند به طور قابل اعتمادی پشتیبانی از کلیپ بورد را برای انواع مختلف MIME، از جمله فرمت های سفارشی وب، شناسایی کنند. این پیشرفت کار با کلیپ‌بورد را قوی‌تر و قابل پیش‌بینی‌تر می‌کند و تجربه کاربر را در همه مرورگرها بهبود می‌بخشد.