الجديد في Chrome 86

Pete LePage

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

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

• تتوفّر الآن واجهة برمجة التطبيقات File System Access API في الإصدار الثابت.
• تتوفّر تجارب مصادر جديدة لواجهة برمجة التطبيقات Web HID وMulti-screen Window Placement API.
• هناك بعض العناصر الجديدة في CSS والكثير غير ذلك.

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

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

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

باستخدام واجهة برمجة التطبيقات File System Access API (المعروفة سابقًا باسم Native File System API) التي اجتازت مرحلة الإصدار التجريبي وأصبحت متاحة الآن في الإصدار الثابت، يمكنك memanggil 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، تتلقّى إدخالات من المستخدمين أو تُقدّم لهم مخرجات. هناك عدد كبير من أجهزة 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 غير الشائعة لمزيد من التفاصيل والأمثلة وكيفية البدء وعرض توضيحي رائع.

مرحلة التجربة والتقييم: واجهة برمجة التطبيقات لميزة "موضع الإعلان في النافذة" على الشاشات المتعددة

يمكنك الآن الحصول على سمات الشاشة التي تظهر عليها نافذة المتصفّح من خلال استدعاء 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 إصدارًا تجريبيًا للمطوّرين في 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() أو عند وضع نوافذ جديدة. يقدّم توم كل التفاصيل في مقاله إدارة عدّة شاشات باستخدام Multi-Screen Window Placement 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 في CSS.

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

سيُعقد مؤتمر Chrome Dev Summit قريبًا من موقعك الإلكتروني، لذا ننصحك بمتابعة أخبارنا على قناتنا على YouTube للحصول على مزيد من المعلومات.

مراجع إضافية

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

• الميزات الجديدة في الإصدار 86 من "أدوات مطوّري البرامج في Chrome"
• الميزات التي سيتم إيقافها نهائيًا أو إزالتها في الإصدار 86 من Chrome
• تعديلات ChromeStatus.com على الإصدار 86 من Chrome
• الميزات الجديدة في JavaScript في الإصدار 86 من Chrome
• قائمة التغييرات في مستودع مصدر Chromium

اشتراك

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

اسمي "بيت ليبيت"، وسأكون هنا لإطلاعك على الميزات الجديدة في Chrome فور طرح الإصدار 87.