الجديد في Chrome 86

يبدأ طرح الإصدار 86 من Chrome على الإصدار الثابت الآن.

وفي ما يلي ما تحتاج إلى معرفته:

اسمي بيت ليب، وأنا أعمل وأصوِّر من المنزل. دعونا نغوص في التفاصيل ونطّلع على الميزات الجديدة لمطوّري البرامج في الإصدار Chrome 86!

الوصول إلى نظام الملفات

يمكنك اليوم استخدام العنصر <input type="file"> لقراءة ملف من القرص. لحفظ التغييرات، أضِف download إلى علامة ارتساء، وسيتم عرض أداة اختيار الملفات، ثم حفظ الملف. لا توجد طريقة للكتابة إلى نفس الملف الذي فتحته. لكن سير العمل هذا مزعج.

باستخدام واجهة برمجة التطبيقات File System Access API (المعروفة سابقًا باسم Native File System API)، التي تخرجت من مرحلة التجربة الأصلية، وتتوفّر الآن في الإصدار الثابت، يمكنك استدعاء الدالة showOpenFilePicker() التي تعرض أداة اختيار الملفات، ثم تعرض مؤشر الملفات الذي يمكنك استخدامه لقراءة الملف.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

لحفظ ملف على القرص، يمكنك إما استخدام مؤشر الملف الذي كنت تستخدمه سابقًا أو الاتصال بـ showSaveFilePicker() للحصول على مؤشر ملف جديد.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
لقطة شاشة لطلب الحصول على إذن
الطلب إلى المستخدم الذي يطلب الإذن بالكتابة في ملف

قبل الكتابة، سيتحقّق Chrome مما إذا كان المستخدم قد منح إذن الكتابة. وإذا لم يتم منح إذن بالكتابة، سيطلب Chrome من المستخدم أولاً.

سيؤدي الاتصال بـ showDirectoryPicker() إلى فتح دليل، ما يتيح لك الحصول على قائمة بالملفات أو إنشاء ملفات جديدة في هذا الدليل. وهو مثالي لأشياء مثل IDE أو مشغّلات الوسائط التي تتفاعل مع الكثير من الملفات. بالطبع، قبل أن تتمكن من كتابة أي شيء، يجب أن يمنح المستخدم إذن الكتابة.

تشمل واجهة برمجة التطبيقات المزيد من الميزات، لذا يمكنك الاطّلاع على مقالة الوصول إلى نظام الملفات على web.dev.

التجربة الأصلية: WebHID

وحدة تحكّم في الألعاب
وحدة تحكُّم في الألعاب

أجهزة الواجهات البشرية، التي يُشار إليها عادةً باسم HID، تحصل على مدخلات من البشر أو توفِّر لهم. هناك عدد كبير من الأجهزة التي تستخدم واجهات بشرية، وهي حديثة للغاية أو قديمة جدًا أو لا يمكن الوصول إليها من خلال برامج تشغيل أجهزة الأنظمة.

تعمل واجهة WebHID API، المتوفّرة الآن كتجربة أصل، على حلّ هذه المشكلة من خلال توفير طريقة للوصول إلى هذه الأجهزة في JavaScript. باستخدام WebHID، يمكن للألعاب المستندة إلى الويب الاستفادة الكاملة من لوحات الألعاب، بما في ذلك جميع الأزرار وأذرع التحكم وأجهزة الاستشعار والمشغلات ومصابيح LED وحزم الألعاب، والمزيد.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

يمكن لتطبيقات محادثات الفيديو المستندة إلى الويب استخدام أزرار الاتصال الهاتفي على مكبّرات الصوت المتخصصة لبدء المكالمات أو إنهائها وكتم الصوت والمزيد.

أداة اختيار جهاز HID
أداة اختيار أجهزة HID.

لا يمكن لواجهات برمجة التطبيقات الفعّالة مثل هذه أن تتفاعل مع الأجهزة إلا عندما يختار المستخدم السماح بذلك بوضوح.

راجِع الاتصال بأجهزة HID غير المألوفة للحصول على مزيد من التفاصيل، والأمثلة، وكيفية بدء الاستخدام، وعرض توضيحي رائع.


التجربة الأصلية: واجهة برمجة تطبيقات تحديد موضع نافذة متعددة الشاشات

يمكنك اليوم معرفة خصائص الشاشة التي تظهر عليها نافذة المتصفّح عن طريق استدعاء window.screen(). ولكن ماذا لو كان لديك إعداد للشاشات المتعددة؟ عذرًا، لن يخبرك المتصفح سوى بالشاشة التي يتم تشغيلها حاليًا.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

تبدأ واجهة برمجة التطبيقات Multi-Screen Window Placement API مرحلة التجربة والتقييم في الإصدار 86 من Chrome 86، وهي تتيح لك عدّ الشاشات المتصلة بجهازك ووضع النوافذ على شاشات محدّدة. تعد القدرة على وضع النوافذ على شاشات معينة أمرًا بالغ الأهمية لأشياء مثل تطبيقات العروض التقديمية وتطبيقات الخدمات المالية وغير ذلك.

قبل أن تتمكّن من استخدام واجهة برمجة التطبيقات، عليك طلب الإذن. وإذا لم تقم بذلك، فإن المتصفح سيطلب من المستخدم عند محاولة استخدامه لأول مرة.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

بعد أن يمنح المستخدم الإذن، يؤدي استدعاء window.getScreens() إلى عرض وعد يتم حلّه باستخدام مصفوفة من كائنات Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

يمكنني بعد ذلك استخدام هذه المعلومات عند الاتصال بـ requestFullScreen() أو وضع نوافذ جديدة. يوفّر "توم" كل التفاصيل في مقالة إدارة العديد من الشاشات باستخدام واجهة برمجة التطبيقات (API) لنافذة متعددة الشاشات على web.dev.

والمزيد

تتيح لك أداة اختيار لغة CSS الجديدة، :focus-visible، تفعيل التوجيه نفسه الذي يستخدمه المتصفّح عند تحديد ما إذا كان سيتم عرض مؤشر التركيز التلقائي أم لا.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

يمكنك تخصيص اللون أو الحجم أو نوع الرقم أو التعداد النقطي للقوائم باستخدام العنصر ::marker Pseudo-Element في CSS.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

ومن المقرّر أن يتم عقد مؤتمر Chrome Dev Summit على شاشة قريبة منك، لذا تابِع قناتنا على YouTube للحصول على مزيد من المعلومات.

محتوى إضافي للقراءة

يتضمن هذا القسم فقط بعض النقاط المهمة. راجِع الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 86 من Chrome.

اشتراك

يمكنك الاطّلاع على أحدث الفيديوهات لدينا، ثم الاشتراك في قناة مطوّري برامج Chrome على YouTube، ستتلقّى إشعارًا عبر البريد الإلكتروني عند إطلاق فيديو جديد أو إضافة خلاصة RSS إلى قارئ الخلاصات.

اسمي بيت ليب، وبعد طرح الإصدار 87 من Chrome، سأكون هنا لأخبركم بالجديد في Chrome!