الميزات الجديدة في Chrome 97

Pete LePage

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

كل عام وأنتم بخير اسمي بيت ليبيه. لنطّلِع على الميزات الجديدة للمطوّرين في الإصدار 97 من Chrome.

Web Transport

إذا كنت تستخدِم Web Sockets أو WebRTC Data Channel API لإرسال الرسائل بين الخادم والصفحة، يتوفّر لك خيار جديد. WebTransport هي واجهة برمجة تطبيقات جديدة توفّر مراسلة بين العميل والخادم ثنائية الاتجاه وذات استجابة سريعة.

وتتميز واجهة برمجة التطبيقات Web Transport API بوقت استجابة أقل من WebSockets، وعلى عكس RTC Data Channel API المُصمَّمة للمراسلة من نظير إلى نظير، فإن Web Transport API مُصمَّم خصيصًا لمراسلة خادم العميل.

فهو يتيح إرسال البيانات بشكل موثوق باستخدام واجهات برمجة تطبيقات مصادر البيانات، وبشكل غير موثوق باستخدام واجهات برمجة التطبيقات لمخطط البيانات. وهي متاحة في مهام الويب. وبما أنّه يعرِض واجهة متوافقة مع Streams، فهو يتيح تحسينات حول الضغط الخلفي.

لاستخدامه، ستحتاج إلى خادم متوافق مع HTTP/3، وهو بشكل عام أسهل من إعداد خادم WebRTC وصيانتها. افتح مثيل WebTransport جديدًا وانتظِر إلى أن يتم ربطه، ويمكنك البدء بإرسال البيانات.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

اطّلِع على المقالة تجربة WebTransport على web.dev للاطّلاع على التفاصيل الكاملة.

رصد ميزات نوع النص البرمجي

يمكننا اليوم استخدام سمة nomodule لرصد مدى توفّر وحدات JavaScript في المتصفّح. ولكن هناك العديد من اقتراحات الميزات الجديدةقيد التقدّم، مثل استيراد الخرائط وقواعد التوقّعات وتحميل الحِزم مسبقًا. نحتاج إلى طريقة لمعرفة الميزات التي يتوافق معها المتصفّح.

أدخِل HTMLScriptElement.supports(). يمكنك استخدامها لتحديد أنواع النصوص البرمجية التي يمكنك استخدامها وإرسال أفضل خيار للمتصفح.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

نماذج أولية جديدة للمصفوفات

أحبّ استخدام JavaScript عندما يكون أسهل. تتيح Array وTypedArray الآن استخدام الطريقتَين الثابتتَين findLast() وfindLastIndex().

تتشابه هذه الدوالّ بشكل أساسي مع find() و findIndex()، ولكنّها تبحث من نهاية المصفوفة بدلاً من بدايتها.

على سبيل المثال، للعثور على الرقم الأخير في صفيف أكبر من عشرة، استخدِم findLast() مع دالة اختبار تتحقّق مما إذا كانت القيمة أكبر من عشرة، ويمكنك المتابعة.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

محاكاة Chrome 100 في سلسلة UA

في غضون بضعة أشهر فقط، سنطرح الإصدار 100 من Chrome، وهو إصدار مكوّن من ثلاثة أرقام. يجب التحقق من أي رمز يتحقّق من أرقام الإصدار أو يحلّل سلسلة UA، وذلك للتأكّد من أنّه يتعامل مع ثلاثة أرقام.

هناك علامة اسمها #force-major-version-to-100 تُغيّر رقم الإصدار الحالي إلى 100، وبالتالي يمكنك التأكّد من أنّ كل الأمور تسير على النحو المتوقّع.

صفحة تشير إلى أنّ Chrome يُبرز الخيار الجديد #force-major-version-to-100

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

تتم الآن تسوية الأسطر الجديدة في إدخالات النموذج بالطريقة نفسها مثل Gecko وWebKit، مما يؤدي إلى تحسين إمكانية التشغيل التفاعلي بين المتصفحات.

نحن بصدد توحيد أسماء التلميح للعميل من خلال إضافة البادئة sec-ch إليها. على سبيل المثال، تصبح السمة dpr sec-ch-dpr. سنواصل إتاحة الإصدارات الحالية من هذه التلميحات، ولكن عليك التخطيط لإيقافها نهائيًا وإزالتها.

أصبحت عناصر <details> المغلقة قابلة للبحث ويمكن الربط بها. سيتم توسيع هذه العناصر المخفية تلقائيًا عند استخدام ميزة "البحث في الصفحة"، ScrollToTextFragment، وميزة التنقّل في أجزاء العناصر.

مراجع إضافية

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

اشتراك

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

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