Chrome 55'teki Yenilikler

Filiz LePage

YouTube'da izle

Ve çok daha fazlası.

Ben Pete LePage. Chrome 55'teki geliştiricilere yönelik yenilikleri burada bulabilirsiniz!

İşaretçi Etkinlikleri

Web'deki nesneleri göstermek eskiden basitti. Fareniz vardı, hareket ettirdiniz, bazen düğmelere bastınız. İşte bu kadar. Ama bu burada pek iyi çalışmıyor.

Dokunma etkinlikleri iyidir, ancak dokunma ve fare özelliklerini desteklemek için iki etkinlik modelini desteklemeniz gerekiyordu:

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

Chrome artık PointerEvents öğelerini göndererek birleştirilmiş giriş işlemeyi etkinleştirir:

elem.addEventListener('pointermove', pointerMoveEvent);

İşaretçi etkinlikleri, tarayıcının işaretçi giriş modelini birleştirerek dokunma, kalem ve fareleri tek bir etkinlik grubunda bir araya getirir. Bunlar IE11, Edge, Chrome, Opera'da desteklenir ve Firefox'ta kısmen desteklenmektedir.

Daha ayrıntılı bilgi için Pointing the Way Forward (İleriye Yönelik Yol Gösterme) adlı kursa göz atın.

async ve await

Eşzamansız JavaScript'le ilgili nedenler belirlemek zor olabilir. Bu işlevi tüm "güzel" geri çağırmalarıyla birlikte alın:

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 ile yeniden yazmak, iç içe yerleştirme sorununun önlenmesine yardımcı olur:

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

Ancak uzun eşzamansız bağımlılıklar zincirleri olduğunda, Promise tabanlı kodların okunması yine de zor olabilir.

Chrome artık async ve await JavaScript anahtar kelimelerini destekleyerek eşzamanlı kod kadar yapılandırılmış ve okunabilen Promise tabanlı JavaScript yazmanıza olanak tanıyor.

Bunun yerine, eşzamansız fonksiyonumuz aşağıdaki şekilde basitleştirilebilir:

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

Jake'in mükemmel bir yayını var: Async Functions - vadedilenleri dostu ve tüm ayrıntılarıyla.

Kalıcı Depolama Alanı

Kalıcı depolama alanı kaynak denemesi artık sona erdi. Artık web depolama alanını kalıcı olarak işaretleyerek Chrome'un sitenizin depolama alanını otomatik olarak temizlemesini önleyebilirsiniz.

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.");
  });
}

Ayrıca, etkileşimi yüksek olan, ana ekrana eklenmiş veya push bildirimlerini etkinleştirmiş sitelere otomatik olarak kalıcı izin izni verilir.

Tüm ayrıntıları ve siteniz için nasıl kalıcı depolama alanı isteyebileceğinizi öğrenmek üzere Chris Wilson'ın Kalıcı Depolama Alanı yayınına göz atın.

CSS Otomatik Kısa Çizgi

Chrome'un en sık talep edilen düzen özelliklerinden biri olan CSS otomatik tireleme, artık Android ve Mac'te desteklenmektedir.

Web Share API

Son olarak, kaynak denemesi olarak kullanılabilen yeni Web Share API ile yerel paylaşım özelliklerini çağırmak artık daha kolay. Paul (Bay Web Intents) Kinlan, Navigator Share yayınında tüm ayrıntılara yer vermiştir.

Kapanma

Bunlar, geliştiricilere yönelik Chrome 55'te yapılan değişikliklerden yalnızca birkaçıdır.

Chrome ile ilgili güncel bilgileri almak ve yenilikler hakkında bilgi edinmek istiyorsanız abone olmayı unutmayın. Ayrıca Chrome ekibinin üzerinde çalıştığı müthiş şeylerden bazılarıyla ilgili daha ayrıntılı bilgi edinmek için Chrome Geliştirici Zirvesi'ndeki videolara göz atmayı da unutmayın.

Ben Pete LePage. Chrome 56 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!