تنسيقات الويب المخصّصة لواجهة Async Clipboard API

Thomas Steiner

حتى الآن، وفّرت واجهة برمجة تطبيقات الحافظة غير المتزامنة مجموعة محدودة من أنواع MIME التي يمكن نسخها ولصقها من حافظة النظام، وتحديدًا: text/plain وtext/html وimage/png. ويعمل المتصفّح عادةً على تنقيح هذه البيانات لإزالة عناصر script المضمَّنة أو روابط javascript: من سلسلة HTML، أو لمنع هجمات تفكيك الضغط بتنسيق PNG.

في بعض الحالات، قد يكون من المستحسن دعم المحتوى الذي لم يتم التحقق منه في الحافظة:

• الحالات التي يتعامل فيها التطبيق مع عملية التعقيم نفسه.
• يشير ذلك المصطلح إلى الحالات التي يكون فيها من الضروري أن تكون البيانات المنسوخة متطابقة مع البيانات التي يتم لصقها.

بالنسبة إلى هذه الحالات، أصبحت واجهة برمجة تطبيقات Async Clipboard API الآن متوافقة مع التنسيقات المخصّصة على الويب التي تتيح للمطوّرين كتابة بيانات عشوائية في الحافظة.

المتصفحات المتوافقة

تتوافق "واجهة برمجة التطبيقات غير المتزامنة" للحافظة في حد ذاتها مع دعم الصور اعتبارًا من الإصدار 76 من Chromium. تتوفّر تنسيقات الويب المخصّصة لواجهة برمجة التطبيقات Async Clipboard API على أجهزة الكمبيوتر المكتبي وعلى Chromium للأجهزة الجوّالة بدءًا من الإصدار 104.

كتابة التنسيقات المخصصة على الويب في الحافظة

تتطابق كتابة التنسيقات المخصّصة على الويب في الحافظة تقريبًا مع كتابة التنسيقات التي تم تصحيحها، باستثناء مطلب إضافة السلسلة "web " (بما في ذلك المسافة اللاحقة) إلى نوع MIME الخاص بكائن ثنائي المستويات.

// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
  fetch('image.jpg').then((response) => response.blob()),
  fetch('image.gif').then((response) => response.blob()),
]);

try {
  // Write the image data to the clipboard, prepending the blobs' actual
  // types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
  // they become `"web image/jpeg"` and `"web image/gif"` respectively.
  // The code elegantly makes use of computed property names:
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
  const clipboardItem = new ClipboardItem({
    [`web ${jpegBlob.type}`]: jpegBlob,
    [`web ${gifBlob.type}`]: gifBlob,
  });
  await navigator.clipboard.write([clipboardItem]);
} catch (err) {
  console.error(err.name, err.message);
}

قراءة التنسيقات المخصصة على الويب من الحافظة

وكما هي الحال بالنسبة إلى عملية الكتابة، تكون قراءة التنسيقات المخصّصة للويب من الحافظة متطابقة تقريبًا مع قراءة التنسيقات المصحَّحة. الاختلاف الوحيد هو أن التطبيق يحتاج الآن إلى البحث عن عناصر الحافظة التي يبدأ نوعها بـ "web ".

try {
  // Iterate over all clipboard items.
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      // Discard any types that are not web custom formats.
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
      // Sanitize the blob if you need to, then process it in your app.
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

إمكانية التشغيل التفاعلي مع التطبيقات الخاصة بالنظام الأساسي

إنّ تنسيقات الويب المخصّصة مثل web image/jpeg ليست مفهومة للتطبيقات العادية والخاصة بالنظام الأساسي (لأنّها تتوقّع image/jpeg). وبمرور الوقت، من المتوقّع أن تضيف التطبيقات المعنية إمكانية استخدام مثل هذه التنسيقات إذا اعتبر المطوّرون أنّ التوافق مع التنسيقات المخصّصة على الويب يتناسب مع احتياجات المستخدمين. في حافظة نظام التشغيل، تتوفّر التنسيقات المتنوّعة بتنسيقات متعدّدة جاهزة للاستهلاك، كما هو موضّح في لقطة الشاشة لنظام التشغيل macOS أدناه.

الخصائص الديموغرافية

يمكنك تجربة العرض التوضيحي أدناه وعرض رمز المصدر لمعرفة طريقة عمل العرض التوضيحي.

شكر وتقدير

راجع هذه المقالة جو ميدلي وفرانسوا بوفورت. صورة رئيسية من تصميم نيون تومي، تم استخدامها بموجب ترخيص CC BY-SA 2.0