الجديد في Chrome 107

Adriana Jara

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

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

خصائص جديدة في واجهة برمجة تطبيقات Screen Screen

في هذا الإصدار، تضيف واجهة برمجة التطبيقات Screen Screen المدفوعة خصائص جديدة لتحسين تجارب مشاركة الشاشة.

أضاف 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 الآن على السمة RenderBlockStatus التي توفّر إشارة مباشرة من المتصفِّح تحدِّد الموارد التي تمنع عرض صفحتك إلى أن يتم تنزيلها.

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

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

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

من خلال تحسين طريقة تحميل الموارد، يمكنك الاستفادة من مؤشرات أداء الويب الأساسية وتوفير تجربة أفضل للمستخدم. راجِع مستندات MDN للحصول على مزيد من المعلومات حول أداء واجهة برمجة التطبيقات وابحث عن موارد حظر العرض وتعمل على تحسينها.

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

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

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

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

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

ومقاييس أخرى

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

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

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

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

اشتراك

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

اسمي "أدريانا جارا"، وبمجرد إطلاق Chrome 108، سأكون هنا لإخبارك بالجديد في Chrome!