الميزات الجديدة في Chrome 96

Pete LePage

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

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

بيان id لتطبيقات الويب التقدّمية (PWA)

عندما يثبّت مستخدم تطبيق ويب تقدّمي (PWA)، يحتاج المتصفّح إلى طريقة لتعريفه بشكل فريد. ولكن حتى وقت قريب، لم تحدّد مواصفات بيان تطبيق الويب كيفية التعرّف على تطبيق الويب التقدّمي (PWA)، ما سمح للمتصفّحات باختيارها، ما يؤدي إلى عمليات تنفيذ مختلفة. في بعض المتصفّحات، يتم استخدام start_url، بينما يتم استخدام المسار إلى ملف البيان في المتصفحات الأخرى.

وهذا يجعل من المستحيل تغيير أي من هذين الحقلين بدون التأثير سلبًا في تجربة التثبيت. تتوفّر الآن سمة id اختيارية جديدة تتيح لك تحديد المعرّف المستخدَم في تطبيق الويب التقدّمي (PWA) الخاص بك بشكل صريح.

تؤدي إضافة السمة id إلى البيان إلى إزالة التبعية على start_url أو موقع البيان، وإتاحة تعديل هذه الحقول.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

يصل الدعم للسمة id إلى المتصفِّحات المستنِدة إلى Chromium على أجهزة الكمبيوتر المكتبي بدءًا من Chrome 96. ومن المفترَض أن يصل الدعم للأجهزة الجوّالة التي تستخدم حاليًا عنوان URL الخاص بالبيان كمعرّف فريد في النصف الأول من عام 2022.

أدوات مطوري البرامج تعرض رقم تعريف التطبيق المحسوب

إذا كان لديك تطبيق ويب تقدّمي (PWA) في مرحلة الإنتاج وأردت إضافة id إلى البيان، عليك استخدام المعرّف الذي ضبطه المتصفّح. يمكنك العثور على id في لوحة ملف البيان ضمن لوحة Application (التطبيق) في "أدوات مطوّري البرامج".

بالنسبة إلى تطبيق الويب التقدّمي (PWA) الجديد، يمكنك ضبط id على أيّ قيمة سلسلة تريدها، ولكن تذكّر أنّك لن تتمكّن من تغييرها في المستقبل، لذا اختَرها بحكمة.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

لمزيد من المعلومات، اطّلِع على مقالة تحديد تطبيقات PWA بشكلٍ فريد باستخدام سمة معرّف بيان تطبيق الويب.

معالِجات بروتوكول عناوين URL لتطبيقات الويب التقدّمية (PWA)

يمكن لتطبيقات الويب استخدام navigator.registerProtocolHandler() للتسجيل كمعالج بروتوكول. على سبيل المثال، يمكن لخدمة Gmail تسجيل بروتوكول mailto. وبعد ذلك عندما ينقر أحد المستخدمين على رابط يحمل البادئة mailto:، سيتم فتح Gmail، ما يسهّل على المستخدم إرسال رسالة إلكترونية.

بدءًا من إصدار Chrome 96، يمكن تسجيل تطبيق الويب التقدّمي (PWA) كمعالج بروتوكول كجزء من عملية تثبيته. لإجراء ذلك في تطبيق الويب التقدّمي (PWA)، أضِف السمة protocol_handlers إلى بيان تطبيق الويب، وحدِّد protocol الذي تريد التعامل معه، وقيمة url التي يجب فتحها عند النقر عليها.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

هناك بعض القيود هنا، ولا يمكنك تسجيل أي بروتوكول فقط، لذلك راجِع تسجيل معالج بروتوكول عنوان URL لتطبيقات PWA للحصول على التفاصيل الكاملة، وكيف يمكنك استخدام بنية web+ لإنشاء بروتوكولاتك الخاصة.

تلميحات الأولوية (تجربة المصدر)

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

التلميحات ذات الأولوية هي ميزة تجريبية متاحة في شكل تجربة مصدر تبدأ في الإصدار 96 من Chrome، ويمكنها المساعدة في تحسين "مؤشرات أداء الويب الأساسية". تتيح لك السمة importance تحديد الأولوية لأنواع الموارد مثل CSS والخطوط والنصوص البرمجية والصور وإطارات iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

على سبيل المثال، إليك صفحة "رحلات جوية من Google". وتُعدّ صورة الخلفية هذه سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).

لقطة شاشة لرحلات جوية من Google مع صورة خلفية كبيرة

لنرى ذلك محملاً مع تلميحات الأولوية وبدون تلميحات لها. عند ضبط الأولوية على high في صورة الخلفية، ينخفض مقياس LCP من 2.6 ثانية إلى 1.9 ثانية.

يمكنك الاطّلاع على المقالة تحسين تحميل الموارد باستخدام Fetch Priority API للتعرّف على كل التفاصيل وكيفية التسجيل في مرحلة التجربة والتقييم، وبعض الأمثلة الرائعة على كيفية تحسين أداء العرض.

محاكاة Chrome 100 في سلسلة Universal Analytics

في وقت مبكر من العام المقبل، سنطلق الإصدار 100 من Chrome، وهو رقم إصدار ثلاثة أرقام. يجب التحقّق من أيّ رمز يتحقّق من أرقام الإصدارات أو تحليل سلسلة Universal Analytics للتأكّد من أنّه يتعامل مع ثلاثة أرقام.

بدءًا من Chrome 96، هناك علامة جديدة #force-major-version-to-100 ستغيّر رقم الإصدار الحالي إلى 100، ما يتيح لك التأكّد من أنّ كل الإعدادات تعمل على النحو المتوقَّع.

صفحة علامات Chrome التي تُبرز خيار #force-major-version-to-100 الجديد

لمزيد من التفاصيل، يُرجى الاطّلاع على المقالة فرض الإصدار 100 الرئيسي على Chrome في سلسلة وكيل المستخدم.

مؤتمر Chrome Dev Summit

اختتام مؤتمر Chrome Dev Summit جميع مقاطع الفيديو والمحتوى متاح على الإنترنت. يمكنك الانتقال إلى الموقع الإلكتروني لمؤتمر Chrome Dev Summit، أو إذا فاتتك الكلمة الافتتاحية أو البث المباشر، يمكنك الاطّلاع على قائمة تشغيل CDS على قناة مطوّري برامج Chrome على YouTube.

ومقاييس أخرى

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

  • تتوفّر ميزة "التخزين المؤقت للصفحات" أو "bfcache" الآن بصيغة ثابتة، وتعمل على توافق Chrome مع كلٍّ من Firefox وSafari.

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

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

اشتراك

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

اسمي بيت ليبيج، وبمجرد طرح Chrome 97، سأكون هنا لإخبارك بالجديد في Chrome!