ديما
03-06-2025, 06:27 PM
سهّلت واجهة برمجة التطبيقات Async Clipboard API العمل مع الحافظة أكثر من ذي قبل. بدلاً من الطرق السابقة لإدارة الحافظة، يمكنك الآن استخدام رمز navigator.clipboard.writeText() لمحتوى النص العادي أو navigator.clipboard.write() لأي محتوى آخر تقريبًا، مثل الصور أو المحتوى النصي أو HTML.
ومع ذلك، لم يتم حتى الآن تحديد مقدار القيمة "تقريبًا". على سبيل المثال، لا يمكنك معرفة ما إذا كانت واجهة برمجة التطبيقات متوافقة مع 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()، يمكنك الآن رصد حالة توفّر ميزة "لوحة النسخ واللصق" للتنسيق المخصّص للويب بشكلٍ صحيح أيضًا والتأكّد من أنّها تعمل.
ملاحظة: لا يزال عليك تضمين طلب navigator.clipboard.write() في كتلة try..catch، لأنّه قد يؤدي إلى ظهور خطأ NotAllowedError DOMException. لا يرتبط ذلك بمدى توفّر التنسيق، ولكن يرتبط مثلاً بعدم منح إذن الوصول إلى الحافظة.
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 المختلفة، بما في ذلك التنسيقات المخصّصة للويب. ويؤدي هذا التحسين إلى جعل العمل باستخدام الحافظة أكثر فعالية ويمكن التنبؤ به، ما يساهم في تحسين تجربة المستخدم على جميع المتصفحات.
ومع ذلك، لم يتم حتى الآن تحديد مقدار القيمة "تقريبًا". على سبيل المثال، لا يمكنك معرفة ما إذا كانت واجهة برمجة التطبيقات متوافقة مع 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()، يمكنك الآن رصد حالة توفّر ميزة "لوحة النسخ واللصق" للتنسيق المخصّص للويب بشكلٍ صحيح أيضًا والتأكّد من أنّها تعمل.
ملاحظة: لا يزال عليك تضمين طلب navigator.clipboard.write() في كتلة try..catch، لأنّه قد يؤدي إلى ظهور خطأ NotAllowedError DOMException. لا يرتبط ذلك بمدى توفّر التنسيق، ولكن يرتبط مثلاً بعدم منح إذن الوصول إلى الحافظة.
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 المختلفة، بما في ذلك التنسيقات المخصّصة للويب. ويؤدي هذا التحسين إلى جعل العمل باستخدام الحافظة أكثر فعالية ويمكن التنبؤ به، ما يساهم في تحسين تجربة المستخدم على جميع المتصفحات.