الجديد في Chrome 55

Pete LePage

المشاهدة على YouTube

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

وهناك الكثير من الميزات الأخرى.

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

أحداث المؤشر

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

أحداث اللمس جيدة، ولكن لتفعيل اللمس والماوس، يجب تفعيل نموذجَي حدثَين:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

يتيح Chrome الآن معالجة الإدخال الموحّدة من خلال إرسال PointerEvents:

elem.addEventListener('pointermove', pointerMoveEvent);

تعمل أحداث المؤشر على توحيد نموذج إدخال المؤشر للمتصفّح، ما يجمع بين الأجهزة التي تعمل باللمس والقلم والفأرة في مجموعة واحدة من الأحداث. وهي متوافقة مع Internet Explorer 11 وEdge وChrome وOpera، وهي متوافقة جزئيًا مع Firefox.

اطّلِع على الإشارة إلى الطريق إلى الأمام لمزيد من التفاصيل.

async وawait

قد يكون من الصعب تحديد سبب حدوث أخطاء في رمز JavaScript غير المتزامن. خذ هذه الوظيفة مع كل طلبات إعادة الاتصال "الرائعة":

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

تساعد إعادة كتابته باستخدام promises في تجنُّب مشكلة التعشيش:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

ومع ذلك، قد يظل من الصعب قراءة الرموز البرمجية المستندة إلى Promise عند توفّر سلاسل طويلة من التبعيات غير المتزامنة.

يتيح لك Chrome الآن استخدام الكلمات الرئيسية async وawait في JavaScript، ما يتيح لك كتابة رموز JavaScript مستندة إلى Promise يمكن أن تكون منظَّمة و سهلة القراءة مثل الرموز المتزامنة.

بدلاً من ذلك، يمكن تبسيط الدالة غير المتزامنة على النحو التالي:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

نشر جاك مشاركة رائعة: الدوال غير المتزامنة: تسهيل استخدام الوعود التي تتضمّن كل التفاصيل.

مساحة التخزين الثابتة

انتهت الآن الفترة التجريبية لمصدر مساحة التخزين الثابتة. يمكنك الآن وضع علامة على ملف تخزين الويب على أنّه دائم، ما يمنع Chrome من محو ملف التخزين تلقائيًا لموقعك الإلكتروني.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

بالإضافة إلى ذلك، يتم تلقائيًا منح الإذن بالاستمرار للمواقع الإلكترونية التي تسجّل تفاعلًا مرتفعًا أو تمت إضافتها إلى الشاشة الرئيسية أو تم تفعيل الإشعارات الفورية فيها.

يمكنك الاطّلاع على مساحة التخزين الثابتة المقدَّمة من "كريس ويلسون" للحصول على التفاصيل الكاملة ومعرفة كيفية طلب مساحة تخزين ثابتة لموقعك الإلكتروني.

تقسيم الكلمات تلقائيًا باستخدام صفحات الأنماط المتتالية (CSS)

الفاصل التلقائي في CSS، وهو أحد ميزات التنسيق الأكثر طلبًا في Chrome، أصبح متاحًا الآن على أجهزة Android وMac.

Web Share API

وأخيرًا، أصبح من الأسهل الآن استخدام إمكانات المشاركة الأصلية باستخدام Web Share API الجديدة، والتي تتوفّر في الإصدار التجريبي من الإصدار الأول. يقدّم بول (المعروف باسم "سيد النوايا على الويب") كينلان كل التفاصيل في مشاركته بعنوان مشاركة المستكشف.

الخاتمة

في ما يلي بعض التغييرات في الإصدار 55 من Chrome للمطوّرين.

إذا كنت تريد البقاء على اطّلاع بآخر أخبار Chrome والتعرّف على الميزات القادمة، احرص على الاشتراك في القناة، ولا تنسَ مشاهدة الفيديوهات من Chrome Dev Summit للتعرّف بشكل أعمق على بعض الميزات الرائعة التي يعمل عليها فريق Chrome.

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