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

يتم طرح الإصدار 79 من Chrome الآن.

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

الرموز القابلة للإخفاء

إذا كنت تستخدم نظام التشغيل Android O أو إصدار أحدث، وكنت قد ثبَّتّ تطبيق ويب تقدّمي، من المحتمل أن تكون قد لاحظت الدائرة البيضاء المزعجة حول الرمز.

من الجيّد أنّ الإصدار 79 من Chrome أصبح الآن متوافقًا مع الرموز القابلة للإخفاء لتطبيقات الويب التقدّمية المثبَّتة.ستحتاج إلى تصميم الرمز ليتلاءم مع المنطقة الآمنة، أي على شكل دائرة يبلغ قطرها 80% من لوحة الرسم.

بعد ذلك، في بيان تطبيق الويب، عليك إضافة سمة purpose جديدة إلى الرمز وضبط قيمتها على maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

نشر "تايغر أوكس" مشاركة رائعة حول CSS Tricks - Maskable Icons: Android Adaptive Icons for Your PWA الذي يتضمّن كل التفاصيل، ويشتمِل على أداة رائعة يمكنك استخدامها لاختبار الرموز للتأكد من ملاءمتها.

محتوى Web XR

يمكنك الآن إنشاء تجارب تفاعلية للهواتف الذكية والشاشات التي يتم ارتداؤها على الرأس من خلال WebXR Device API.

يتيح WebXR مجموعة كاملة من التجارب الغامرة. بدءًا من استخدام الواقع المعزّز لمعرفة الشكل الذي قد تبدو عليه الأريكة الجديدة في منزلك قبل شرائها، وإلى ألعاب الواقع الافتراضي والأفلام بزاوية 360 درجة، وغير ذلك الكثير.

لبدء استخدام واجهة برمجة التطبيقات الجديدة، يمكنك الاطّلاع على مقالة تطبيق الواقع الافتراضي على الويب.

تجارب نقطة انطلاق جديدة

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

لا تكون الميزات التجريبية متاحة إلّا بعد إبلاغنا، ولكن عندما نقدّم تجربة المصدر لإحدى الميزات، يمكنك التسجيل في مرحلة التجربة والتقييم هذه لتفعيلها لجميع المستخدمين في موقعك الإلكتروني المصدر.

يتيح لك الاشتراك في مرحلة التجربة والتقييم إنشاء إصدارات تجريبية ونماذج أولية يمكن لمستخدمي الاختبار التجريبي تجربتها طوال مدة التجربة بدون مطالبتهم بقلب أي علامات خاصة في Chrome.

يمكنك الاطّلاع على مزيد من المعلومات حول تجارب المصدر في دليل الإصدارات التجريبية للمطوّرين على الويب. يمكنك الاطّلاع على قائمة بتجارب المصدر النشطة والاشتراك فيها في صفحة Chrome Origin Trials.

قفل التنشيط

من أكبر ما يخطر ببالي الحيوانات الأليفة بشأن العروض التقديمية من Google هو أنه إذا تركت العرض مفتوحًا على شريحة واحدة لفترة طويلة جدًا، تبدأ شاشة التوقف. يجب فتح قفل جهاز الكمبيوتر قبل المتابعة. أُفّ.

مع واجهة برمجة التطبيقات Wake Lock API الجديدة، يمكن للصفحة طلب قفلها ومنع تعتيم الشاشة أو منع ظهور شاشة الاستراحة. إنه مثالي للعروض التقديمية، ولكنه مفيد أيضًا لأشياء مثل مواقع وصفات الطعام - حيث قد ترغب في إبقاء الشاشة قيد التشغيل أثناء اتباع التعليمات.

لطلب قفل التنشيط، يجب استدعاء الدالة navigator.wakeLock.request() وحفظ كائن WakeLockSentinel الذي يعرضه.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

يبقى القفل ظاهرًا إلى أن ينتقل المستخدم إلى صفحة أخرى أو يتم استدعاء release على عنصر WakeLockSentinel الذي حفظته سابقًا.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

يمكنك الاطّلاع على مزيد من التفاصيل على web.dev/wakelock.

سمة واحدة (rendersubtree)

هناك أوقات لا تريد فيها عرض جزء من DOM على الفور. على سبيل المثال، برامج التمرير التي تحتوي على قدر كبير من المحتوى، أو واجهات المستخدم المبوبة التي لا يظهر فيها سوى جزء من المحتوى في أي وقت.

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

عند ضبط rendersubtree على invisible، لا يتم رسم محتوى العنصر أو اختبار النتائج، ما يسمح بتحسين العرض.

يؤدي تغيير rendersubtree إلى activatable إلى إظهار المحتوى من خلال إزالة السمة invisible وعرض المحتوى.

مؤتمر Chrome Dev Summit لعام 2019

إذا فاتك مؤتمر Chrome Dev Summit، يمكنك الاطّلاع على جميع المحاضرات على قناتنا على YouTube.

لدى "جيك" أيضًا سلسلة محادثات رائعة على Twitter تحتوي على جميع المواضيع الممتعة التي حدثت بين المحادثات، بما في ذلك العضو الجديد في فريقنا، سورجيكو.

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

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

اشتراك

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

اسمي بيت ليب، وبمجرد إطلاق Chrome 80، سأكون على استعداد هنا لإخبارك بالجديد في Chrome!