الميزات الجديدة في 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

محاكاة الإصدار 100 من Chrome في سلسلة Universal Analytics

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

هناك علامة تُسمى #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 فور طرحه.