الجديد في Chrome 85

Pete LePage

بدأنا بطرح الإصدار 85 من Chrome الثابت الآن.

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

اسمي بيت ليبيه، وأعمل وأصور الفيديوهات من المنزل. لنطّلع على الميزات الجديدة للمطوّرين في الإصدار 85 من Chrome.

إذن الوصول إلى المحتوى

عملية عرض المتصفّحات

لتحويل ملف HTML إلى محتوى يمكن للمستخدم رؤيته، يجب أن ينفِّذ المتصفّح عدة خطوات قبل أن يتمكّن من عرض أول بكسل. ويُجري ذلك على مستوى الصفحة بأكملها، حتى بالنسبة إلى المحتوى الذي لا يظهر في إطار العرض.

عند تطبيق content-visibility: auto على عنصر، يُعلم المتصفّح بأنّه يمكنه تخطّي عملية عرض هذا العنصر إلى أن يتم الانتقال إليه في مجال العرض، ما يوفر عرضًا أوليًا أسرع.


.my-class {
  content-visibility: auto;
}

للاستفادة إلى أقصى حدّ من content-visibility، طبِّقه على المحتوى الرئيسي الأقسام التي تحتوي على خوارزميات تنسيق أكثر تعقيدًا، مثل flexbox وgrid، أو التي تحتوي على أقسام فرعية ذات تنسيقات محصورة خاصة بها.

من خلال تقسيم المحتوى وإضافة content-visibility: auto;، انخفض وقت عرض هذه الصفحة من 232 ملي ثانية إلى 30 ملي ثانية فقط.

اطّلِع على مستوى ظهور المحتوى لمعرفة كيفية استخدامه لتحسين أداء العرض.

@property ومتغيّرات CSS

متغيّرات CSS، التي تُعرف تقنيًا باسم السمات المخصّصة، رائعة. باستخدام واجهة برمجة التطبيقات Houdini CSS Properties and Values API، يمكنك تحديد نوع وقيمة احتياطيةتلقائية لسماتك المخصّصة. لقد عالجت هذه الميزة سابقًا في مقالة الميزات الجديدة في الإصدار 78 من Chrome، عندما أضفنا إمكانية تحديدها في JavaScript.

اعتبارًا من الإصدار 85 من Chrome، يمكنك أيضًا تحديد خصائص CSS وضبطها مباشرةً في ملف CSS. ما أحبّه في خصائص CSS هو أنّها تمنح الخاصية معنى دلاليًا وقيمًا احتياطية، بل وتتيح أيضًا اختبار CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

نشرت "أونا" تدوينة رائعة بعنوان @property: منح قدرات خارقة لمتغيّرات CSS توضّح لك كيفية استخدامها.

الحصول على التطبيقات ذات الصلة المثبَّتة

تتيح لك واجهة برمجة التطبيقات getInstalledRelatedApps() التحقّق مما إذا كان تطبيقك مثبّتًا، ثم تخصيص تجربة المستخدم.

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

عند طرحه لأول مرة في Chrome 80، لم يكن يعمل إلا مع تطبيقات Android. والآن، على أجهزة Android، يمكنه أيضًا التحقّق مما إذا كان تطبيقك المتوافق مع الأجهزة الجوّالة تم تثبيته. وعلى نظام التشغيل Windows، يمكنه التحقّق مما إذا كان تطبيق Windows UWP مثبّتًا.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

اطّلِع على مقالتي التالية: هل تم تثبيت تطبيقك؟ getInstalledRelatedApps() سيشرح لك ذلك. على web.dev للتعرّف على آلية عملها وكيفية توقيع تطبيقاتك لإثبات ملكيتها لك.

اختصارات رموز التطبيقات

اختصار رمز التطبيق على نظام التشغيل Windows

في الإصدار 84 من Chrome، أضفنا إمكانية استخدام اختصارات رموز التطبيقات. لقد قلت عن طريق الخطأ أنّه كانت متاحة في كل مكان، ولكنّها كانت متاحة على أجهزة Android فقط. والآن، في الإصدار 85 من Chrome، أصبحت هذه الميزة متاحة على Android وWindows، و في Chrome وEdge معًا.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

يمكنك الاطّلاع على مقالة اختصارات رموز التطبيقات على web.dev للحصول على التفاصيل الكاملة، وأعتذر عن أي التباس سبّبته لك هذه المشكلة.

مرحلة التجربة والتقييم: طلبات البث باستخدام fetch()

اعتبارًا من الإصدار 85 من Chrome، أصبح fetch بث التحميل متاحًا كإصدار قيد الاختبار في مرحلة الطرح. يتيح لك ذلك بدء عملية استرجاع قبل أن يصبح محتوى الطلب جاهزًا. في السابق، لم يكن بإمكانك بدء طلب إلا بعد أن يصبح النص الكامل جاهزًا. أما الآن، فيمكنك بدء إرسال المحتوى حتى أثناء إنشائه.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

على سبيل المثال، يمكنك استخدامها لتهيئة الخادم أو بث الصوت أو الفيديو أثناء تسجيله من الميكروفون أو الكاميرا.

يقدّم "جاك" نظرة معمّقة في طلبات البث باستخدام واجهة برمجة التطبيقات Fetch API على web.dev، كما تناولها في أحدث فيديو بعنوان HTTP203 - طلبات البث باستخدام واجهة برمجة التطبيقات Fetch API.

والمزيد

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

Promise.any يعرض وعدًا يتم تنفيذه من خلال الوعد الأول الذي تم تقديمه ليكون قابلاً للتنفيذ أو الرفض.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

يمكنك استبدال جميع النُسخ في سلسلة أسهل باستخدام .replaceAll()، ولن تحتاج بعد الآن إلى استخدام التعبيرات العادية.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

يتيح الإصدار 85 من Chrome فك ترميز AVIF، وهو تنسيق صور يتم ترميزه باستخدام AV1 ووضع معايير له من قِبل Alliance for Open Media. يحقّق تنسيق AVIF تحسينات مهمة في ملفاته مقارنةً بتنسيقَي JPEG وWebP، إذ أظهرت دراسة أجرتها Netflix مؤخرًا خفضًا بنسبة% 50 في حجم ملفات تنسيق JPEG العادي وأكثر من% 60 في حجم ملفات المحتوى بتنسيق 4:4:4.

وبدأت إزالة AppCache.

مراجع إضافية

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

اشتراك

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

اسمي "بيت ليبيه"، وأخيرًا قصصت شعري.

بعد إصدار الإصدار 86 من Chrome، سنطلعك على الميزات الجديدة فيه.