الجديد في 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، تتلقّى إدخالات من المستخدمين أو تقدّم لهم معلومات. هناك عدد كبير من أجهزة الواجهة البشرية التي تكون جديدة جدًا أو قديمة جدًا أو غير شائعة جدًا بحيث لا يمكن لبرامج تشغيل devices في الأنظمة الوصول إليها.

تعالج واجهة برمجة التطبيقات 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 للحصول على مزيد من المعلومات.

مراجع إضافية

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

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

اشتراك

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

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