الجديد في Chrome 55

بيت ليب

Twitter GitHub تأثير اهتزاز Mastodon الصفحة الرئيسية

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

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

وهناك المزيد.

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

أحداث المؤشر

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

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

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

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

elem.addEventListener('pointermove', pointerMoveEvent);

توحِّد أحداث المؤشر نموذج إدخال المؤشر للمتصفِّح، من خلال دمج اللمس والأقلام وأجهزة الماوس معًا في مجموعة واحدة من الأحداث. وهي متوافقة مع IE11 و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);
    });
}

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

يتيح Chrome الآن استخدام الكلمات الرئيسية لـ JavaScript async وawait، ما يتيح لك كتابة محتوى JavaScript مبني على وعد ويمكن أن يكون منظّمًا وقابلاً للقراءة مثل رمز متزامن.

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

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 الجديدة المتاحة كإصدار تجريبي من المصدر. لقد ذكر "بول (Mr. Web Intents) كينلان كل التفاصيل في مشاركته "مشاركة المستكشف".

الخاتمة

هذه ليست سوى عدد قليل من التغييرات التي طرأت على إصدار 55 من Chrome للمطوّرين.

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

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