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

Pete LePage

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

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

النقل على الويب

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

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

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

ولاستخدامه، ستحتاج إلى خادم يتوافق مع 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);

يمكنك مراجعة المقالة Trying with 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 في سلسلة Universal Analytics

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

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

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

ومقاييس أخرى

بالطبع هناك المزيد.

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

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

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

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

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

اشتراك

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

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