الجديد في Chrome 107

Adriana Jara

في ما يلي المعلومات التي يجب معرفتها:

اسمي أدريانا جارا. لنتعرّف على الميزات الجديدة لمطوّري Chrome 107.

سمات جديدة في Screen Capture API

في هذا الإصدار، تضيف واجهة Screen Capture API سمات جديدة لتحسين تجارب مشاركة الشاشة.

أضافت السمة DisplayMediaStreamOptions السمة selfBrowserSurface. باستخدام هذا التلميح، يمكن للتطبيق إعلام المتصفّح بأنّه عند طلب getDisplayMedia()، يجب استبعاد علامة التبويب الحالية.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

يساعد ذلك في منع التقاط صورة ذاتية عن طريق الخطأ وتجنُّب تأثير "قاعة المرايا" الذي رأيناه في اجتماعات الفيديو.

DisplayMediaStreamOptionsيحتوي الآن أيضًا على السمة surfaceSwitching. تضيف هذه السمة خيارًا للتحكّم آليًا في ما إذا كان Chrome سيعرض زرًا لتبديل علامات التبويب أثناء مشاركة الشاشة. سيتم تمرير هذه الخيارات إلى getDisplayMedia(). يتيح الزر Share this tab instead للمستخدمين التبديل إلى علامة تبويب جديدة بدون الرجوع إلى علامة تبويب اجتماع الفيديو أو الاختيار من قائمة طويلة من علامات التبويب، ولكن يتم عرض السلوك بشكل مشروط في حال لم يتعامل تطبيق الويب معه.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

تضيف السمة MediaTrackConstraintSet أيضًا السمة displaySurface. عند استدعاء getDisplayMedia()، يقدّم المتصفّح للمستخدم خيارًا من أسطح العرض: علامات التبويب أو النوافذ أو الشاشات. باستخدام القيد displaySurface، يمكن لتطبيق الويب الآن أن يلمّح للمتصفّح إذا كان يفضّل عرض أحد أنواع الشاشات بشكل أكثر بروزًا.

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

تحديد الموارد التي تحظر العرض

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

تتضمّن واجهة Performance API الآن السمة renderBlockingStatus التي توفّر إشارة مباشرة من المتصفّح تحدّد الموارد التي تمنع عرض صفحتك إلى أن يتم تنزيلها.

يعرض مقتطف الرمز هنا كيفية الحصول على قائمة بجميع الموارد واستخدام السمة renderBlockingStatus الجديدة لإدراج جميع الموارد التي تحظر العرض.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

يساعد تحسين طريقة تحميل الموارد في تحسين Core Web Vitals وتوفير تجربة أفضل للمستخدمين. يمكنك الاطّلاع على مستندات MDN لمعرفة المزيد حول Performance API، والبحث عن الموارد التي تحظر العرض وتحسينها.

مرحلة التجربة والتقييم في PendingBeacon API

تتيح واجهة برمجة التطبيقات التعريفية PendingBeacon API للمتصفّح التحكّم في وقت إرسال إشارات المرور.

إشارة الويب هي حزمة من البيانات يتم إرسالها إلى خادم خلفي، بدون توقّع استجابة معيّنة.

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

اشترِك في مرحلة التجربة والتقييم وجرِّب واجهة برمجة التطبيقات وأرسِل إلينا ملاحظاتك لتحسين حالات الاستخدام.

وغير ذلك

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

  • تم إيقاف عنوان HTTP‏ expect-ct نهائيًا.
  • أصبحت السمة rel متاحة الآن في عناصر <form>.
  • في المرة السابقة، ذكرتُ استكمال grid-template، وهذه المرة يجب تضمينه.

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

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

اشتراك

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

أنا "أدريانا جارا"، وسأكون هنا فور إصدار Chrome 108 لأخبرك بالميزات الجديدة في Chrome.