الجديد في Chrome 107

Adriana Jara

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

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

مواقع جديدة في 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');

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

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

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

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

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

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

وغير ذلك

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

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

مراجع إضافية

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

اشتراك

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

اسمي "أدريانا جارا"، وسأكون هنا لإطلاعك على ميزات الإصدار 108 من Chrome فور طرحه.