في ما يلي أهم ميزات Chrome 124:
- يتوفّر نوعان جديدان من واجهات برمجة التطبيقات يتيحان استخدام تعريف shadow DOM من JavaScript.
- يمكنك استخدام مصادر البيانات في Web Sockets.
- عرض عمليات النقل تتحسّن قليلاً.
- وهناك المزيد.
هل تريد الاستماع إلى القائمة الكاملة؟ راجِع ملاحظات إصدار Chrome 124.
استخدام تعريف shadow DOM في JavaScript
هناك اثنان من واجهات برمجة التطبيقات الجديدة يتيحان استخدام shadow DOM الإعلامي من JavaScript.
إنّ السمة setHTMLUnsafe()
تشبه innerHTML
، وتتيح لك ضبط رمز HTML الداخلي للعنصر على السلسلة المتوفّرة. من المفيد أن يكون ذلك مفيدًا عندما يكون لديك رمز HTML يتضمّن
معرّف shadow DOM، مثل هذا.
<my-custom-element>
<template shadowrootmode="open">
<style>
:host {
display: block;
color: yellow;
}
</style>
Hello, <slot></slot>
</template>
</my-custom-element>
إذا استخدمت innerHTML
فقط، لن يحلّله المتصفّح بشكل صحيح، ولن يتوفّر shadow DOM. ولكن باستخدام setHTMLUnsafe()
، يتم إنشاء shadow DOM،
ويتم تحليل العنصر على النحو المتوقَّع.
const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);
واجهة برمجة التطبيقات الأخرى هي parseHTMLUnsafe()
، وهي تعمل تمامًا مثل DOMParser.parseFromString()
.
كل من واجهتَي برمجة التطبيقات هاتَين غير آمنة، ما يعني أنّهما لا تُجريان أي تعديلات على الإدخالات. لذا، يجب الحرص على أن يكون المحتوى الذي تطعمه آمنًا. في إصدار قادم، نتوقع أن نرى إصدارًا يوفر تصحيحًا للمدخلات.
وأخيرًا، يتم دعم كل من واجهتي برمجة التطبيقات هذتين بالفعل في أحدث إصدار من Firefox وSafari!
واجهة برمجة تطبيقات WebSocket Stream
تُعدّ مآخذ الويب طريقة رائعة لإرسال البيانات ذهابًا وإيابًا بين متصفح المستخدم والخادم دون الحاجة إلى الاعتماد على الاستطلاع. وهذا أمر رائع لأشياء مثل تطبيقات الدردشة، التي تريد التعامل من خلالها مع المعلومات فور تلقّيها.
ولكن ماذا لو وصلت البيانات بشكل أسرع مما يمكنك التعامل معها؟
وهذا ما يسمى بضغط الظهر، ويمكن أن يسبب لك بعض الصداع الشديد. للأسف، لا تحتوي واجهة برمجة تطبيقات WebSocket على طريقة جيدة للتعامل مع الضغط الخلفي.
وتمنحك WebSocket Stream API إمكانية بث البيانات ومقابس الويب، ما يعني أنه يمكن تطبيق ضغط البيانات على شاشة الرجوع بدون أي تكلفة إضافية.
ابدأ بإنشاء WebSocketStream
جديد وتمرير عنوان URL لخادم WebSocket.
const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();
while (true) {
const {value, done} = await reader.read();
if (done) {
break;
}
const result = await process(value);
await writer.write(result);
}
بعد ذلك، انتظِر حتى يتم فتح الاتصال، ما يؤدي إلى ظهور ReadableStream
وWritableStream
. من خلال استدعاء طريقة
ReadableStream.getReader()
، ستحصل على ReadableStreamDefaultReader
يمكنك بعد ذلك read()
الاطّلاع على بياناته حتى انتهاء البث.
لكتابة البيانات، يجب استدعاء طريقة WritableStream.getWriter()
التي تمنحك WritableStreamDefaultWriter
، ويمكنك بعد ذلك write()
إرسال البيانات إليها.
عرض التحسينات المتعلّقة بعمليات النقل
يهمني الحصول على ميزات "انتقالات العرض"، وهناك ميزتان جديدتان في Chrome 124 تم تصميمهما لتسهيل عمليات نقل طرق العرض.
يتم تنشيط الحدث pageswap
على كائن نافذة المستند عندما يستبدل عنصر التنقّل المستند بمستند جديد.
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
وتتيح لك ميزة حظر عرض المستندات حظر عرض المستند حتى يتم تحليل المحتوى المهم، ما يضمن عرض محتوى متناسق أولاً على جميع المتصفحات.
ومقاييس أخرى
بالطبع هناك المزيد.
يشير
disallowReturnToOpener
إلى المتصفّح بأنّه من المفترض ألا يعرض زرًا في النافذة ضمن نافذة "نافذة ضمن النافذة"، ويجب أن يؤدي هذا الزر إلى السماح للمستخدم بالعودة إلى علامة التبويب المفتوحة.تعمل حاويات التمرير التي تركّز على لوحة المفاتيح على تحسين إمكانية الوصول من خلال جعل حاويات التمرير قابلة للتركيز باستخدام التنقّل المتسلسل الذي يعمل بالتركيز.
ويسمح التثبيت العام للمستخدمين بتثبيت أي صفحة، حتى تلك التي لا تستوفي معايير تطبيق الويب التقدّمي (PWA) الحالية.
محتوى إضافي للقراءة
يتناول هذا الدليل بعض الميزات الرئيسية فقط. تحقَّق من الروابط التالية بحثًا عن تغييرات إضافية في Chrome 124.
- ملاحظات إصدار Chrome 124
- الميزات الجديدة في "أدوات مطوري البرامج في Chrome" (124)
- تحديثات ChromeStatus.com للإصدار 124 من Chrome
- قائمة تغييرات مستودع مصدر Chromium
- تقويم إصدارات Chrome
اشتراك
للاطّلاع على آخر الأخبار، اشترِك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.
اسمي بيت ليب، وبعد إطلاق Chrome 125، سنكون هنا لإخبارك بالجديد في Chrome!