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

Pete LePage

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

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

ملف البيان id لتطبيقات الويب التقدّمية

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

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

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

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

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

أدوات المطوّرين تعرِض رقم تعريف التطبيق الذي تم احتسابه

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

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

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

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

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

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

اعتبارًا من الإصدار 96 من Chrome، يمكن لتطبيق الويب التقدمي (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).

لقطة شاشة من &quot;رحلات جوية من Google&quot; تظهر فيها صورة خلفية كبيرة

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

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

محاكاة الإصدار 100 من Chrome في سلسلة Universal Analytics

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

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

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

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

مؤتمر Chrome Dev Summit

انتهت قمة مطوّري البرامج في Chrome. تتوفّر كل الفيديوهات والمحتوى على الإنترنت. يمكنك الاطّلاع على موقع "قمة مطوّري برامج Chrome" الإلكتروني، أو إذا فاتك العرض الرئيسي أو البث المباشر، يمكنك الاطّلاع على قائمة تشغيل "قمة مطوّري برامج Chrome" على قناة مطوّري برامج Chrome على YouTube.

وغير ذلك

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

  • تتوفّر ذاكرة التخزين المؤقت للرجوع إلى الصفحات السابقة أو الانتقال إليها، أو الرمز bfcache، الآن في الإصدار الثابت، ويمنح Chrome ميزات مشابهة لتلك المتوفّرة في Firefox وSafari.

مراجع إضافية

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

اشتراك

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

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