جدید در کروم 55

Pete LePage

در یوتیوب تماشا کنید

• async و await به شما این امکان را می دهد که کدهای مبتنی بر وعده را طوری بنویسید که گویی همزمان هستند، اما بدون مسدود کردن رشته اصلی.
• رویدادهای اشاره گر روشی یکپارچه برای مدیریت همه رویدادهای ورودی ارائه می دهند.
• به سایت‌هایی که به صفحه اصلی اضافه می‌شوند، به‌طور خودکار مجوز ذخیره‌سازی دائمی داده می‌شود.

و چیزهای بیشتری وجود دارد.

من Pete LePage هستم، در اینجا چیزهای جدیدی برای توسعه دهندگان در Chrome 55 وجود دارد!

رویدادهای اشاره گر

اشاره کردن به چیزهایی در وب قبلا ساده بود. شما یک ماوس داشتید، آن را جابه‌جا می‌کردید، گاهی اوقات دکمه‌ها را فشار می‌دادید و تمام. اما این، در اینجا به خوبی کار نمی کند.

رویدادهای لمسی خوب هستند، اما برای پشتیبانی از لمس و ماوس ، باید از دو مدل رویداد پشتیبانی می‌کردید:

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

Chrome اکنون با ارسال PointerEvents مدیریت ورودی یکپارچه را فعال می‌کند:

elem.addEventListener('pointermove', pointerMoveEvent);

رویدادهای اشاره گر مدل ورودی اشاره گر را برای مرورگر یکسان می کند و لمس، قلم ها و موش ها را در یک مجموعه واحد از رویدادها با هم ترکیب می کند. آنها در IE11، Edge، Chrome، Opera و تا حدی در فایرفاکس پشتیبانی می شوند.

برای جزئیات بیشتر ، نقطه نشان دادن راه رو به جلو را بررسی کنید.

async و await

استدلال جاوا اسکریپت ناهمزمان ممکن است دشوار باشد. این تابع را با تمام تماس های "دوست داشتنی" آن انجام دهید:

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 ممکن است دشوار باشد.

کروم اکنون از کلیدواژه‌های async و await جاوا اسکریپت پشتیبانی می‌کند و به شما امکان می‌دهد جاوا اسکریپت مبتنی بر Promise بنویسید که می‌تواند به اندازه کدهای همزمان ساختاریافته و قابل خواندن باشد.

در عوض، تابع ناهمزمان ما را می توان به این شکل ساده کرد:

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

جیک یک پست عالی دارد: توابع Async - دادن وعده‌ها با تمام جزئیات.

ذخیره سازی مداوم

آزمایش مبدا ذخیره سازی دائمی اکنون به پایان رسیده است. اکنون می‌توانید فضای ذخیره‌سازی وب را به‌عنوان دائمی علامت‌گذاری کنید و از پاک کردن خودکار فضای ذخیره‌سازی سایتتان توسط 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 جدید، که به‌عنوان نسخه آزمایشی اصلی در دسترس است، آسان‌تر است. پل (آقای اهداف وب) Kinlan تمام جزئیات را در پست Navigator Share خود دارد.

بسته شدن

اینها تنها تعدادی از تغییرات Chrome 55 برای توسعه دهندگان است.

اگر می‌خواهید با Chrome به‌روز بمانید و بدانید چه چیزی در راه است، حتماً مشترک شوید و برای بررسی عمیق‌تر برخی از موارد فوق‌العاده‌ای که تیم Chrome روی آنها کار می‌کند، حتماً ویدیوهای جلسه Chrome Dev Summit را بررسی کنید.

من Pete LePage هستم، و به محض اینکه Chrome 56 منتشر شود، اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!