الجديد في 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، يمكنك تحديد نوع وقيمة احتياطية تلقائية لخصائصك المخصّصة. وقد سبق أن تناولتها في الميزات الجديدة في Chrome 78، عندما أتحنا إمكانية تحديدها في JavaScript.

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

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

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

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

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

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

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

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 على web.dev، كما تم تناول الموضوع في الفيديو الأخير HTTP203 - طلبات البث باستخدام fetch.

والمزيد

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

تعرض الدالة 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، وستتلقّى إشعارًا عبر البريد الإلكتروني كلما أطلقنا فيديو جديدًا.

أنا "بيت ليبيج"، وأخيرًا قصصتُ شعري.

سأكون هنا لأخبرك بالميزات الجديدة في Chrome فور طرح الإصدار 86.