Fungsi ClipboardItem.supports() kini tersedia di Dasar Pengukuran

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Thomas Steiner

Dipublikasikan: 30 April 2025

Perayaan: Fitur web ini kini tersedia di ketiga mesin browser utama, dan menjadi Dasar Pengukuran yang Baru tersedia mulai 30 Maret 2025.

Async Clipboard API telah membuat penggunaan papan klip jauh lebih mudah daripada sebelumnya. Sebagai ganti metode sebelumnya untuk mengelola papan klip, kini Anda dapat memanggil navigator.clipboard.writeText() untuk konten teks biasa atau navigator.clipboard.write() untuk "hampir" semua hal lainnya seperti gambar, konten teks, atau HTML.

Namun, sejauh ini, satu hal yang belum ada adalah mengukur "hampir". Misalnya, Anda tidak dapat mengetahui apakah API mendukung SVG hingga Anda mencobanya, lalu, jika tidak didukung, menangkap pengecualian yang ditampilkan. Ini bukan cara yang sangat ergonomis untuk menentukan dukungan, itulah sebabnya fungsi ClipboardItem.supports() statis ditentukan.

Fungsi ini kini telah mencapai status Dasar Pengukuran Baru tersedia, yang berarti penggunaan papan klip menjadi lebih baik. Untuk mengetahui apakah browser mendukung format tertentu, teruskan jenis MIME format yang Anda minati ke fungsi.

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."

Sebelumnya, saya menulis "hampir" semuanya, dan di sinilah hal yang benar-benar menarik terjadi. Format kustom web memungkinkan Anda menggunakan format yang tidak didukung secara native oleh browser. Misalnya, secara default, browser tidak mendukung gambar 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."

Namun, dengan menggunakan format kustom web, Anda dapat menggunakan gambar AVIF serta menyalin dan menempelkannya dengan bebas, selama pihak penerima juga mengetahui cara menangani format kustom 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."

Berkat fungsi ClipboardItem.supports(), Anda kini juga dapat mendeteksi situasi dukungan papan klip untuk format kustom web dengan benar dan memastikannya berfungsi.

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);
  }
}

Dengan fungsi ClipboardItem.supports() yang kini tersedia sebagai Dasar Pengukuran Baru, developer web dapat mendeteksi dukungan papan klip dengan andal untuk berbagai jenis MIME, termasuk format kustom web. Peningkatan ini membuat penggunaan papan klip menjadi lebih andal dan dapat diprediksi, sehingga meningkatkan pengalaman pengguna di semua browser.