الجديد في 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، سنطلعك على الميزات الجديدة فيه.