Chrome 55'teki Yenilikler

Pete LePage

YouTube'da izle

• async ve await, ana iş parçacığını engellemeden, söze dayalı kodu eşzamanlıymış gibi yazmanıza olanak tanır.
• İşaretçi etkinlikleri, tüm giriş etkinliklerini tek bir şekilde işleme olanağı sunar.
• Ana ekrana eklenen sitelere otomatik olarak kalıcı depolama izni verilir.

Bunun gibi birçok özellikten yararlanabilirsiniz.

Adım Pete LePage. Chrome 55'teki geliştiricilere yönelik yenilikleri paylaşacağım.

İşaretçi Etkinlikleri

Web'de bir nesneyi işaretlemek eskiden basit bir işlemdi. Fareniz vardı, onu hareket ettiriyordunuz, bazen düğmelere basıyordunuz ve bu kadardı. Ancak bu, burada pek işe yaramıyor.

Dokunma etkinlikleri iyidir ancak dokunma ve fare'yi desteklemek için iki etkinlik modelini desteklemeniz gerekir:

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

Chrome artık PointerEvents göndererek birleşik giriş işlemeyi etkinleştiriyor:

elem.addEventListener('pointermove', pointerMoveEvent);

İşaretçi etkinlikleri, tarayıcı için işaretçi giriş modelini birleştirerek dokunma, kalem ve fareleri tek bir etkinlik grubu altında toplar. Bu videolar IE11, Edge, Chrome, Opera'da desteklenir ve Firefox'ta kısmen desteklenir.

Daha fazla bilgi için Gelecek İçin Yol Gösterme başlıklı makaleyi inceleyin.

async ve await

Eşzamansız JavaScript'i anlamak zor olabilir. Tüm "sevimli" geri çağırmalarıyla birlikte bu işlevi ele alalım:

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 sorununu önlemeye 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, Promise tabanlı kodun okunması, uzun ayarsız bağımlılık zincirleri olduğunda yine de zor olabilir.

Chrome artık async ve await JavaScript anahtar kelimelerini destekliyor. Bu sayede, eşzamanlı kod kadar yapılandırılmış ve okunabilir Promise tabanlı JavaScript yazabilirsiniz.

Bunun yerine, eşzamansız işlevimiz şu ş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'ın tüm ayrıntıları içeren harika bir makalesi var: Asenkron İşlevler - Promise'leri kullanıcı dostu hale getirme.

Kalıcı Depolama Alanı

Kalıcı depolama alanı kaynağı denemesi sona erdi. Artık web depolama alanını kalıcı olarak işaretleyerek Chrome'un sitenizin depolama alanını otomatik olarak temizlemesini engelleyebilirsiniz.

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 eklenen veya push bildirimleri etkin olan sitelere otomatik olarak kalıcılık izni verilir.

Tüm ayrıntılar ve siteniz için kalıcı depolama alanı isteğinde bulunma hakkında bilgi edinmek üzere Chris Wilson'un Kalıcı Depolama konulu yayınına göz atın.

CSS Otomatik Tireleme

Chrome'un en sık istenen düzenleme özelliklerinden biri olan CSS otomatik tireleme artık Android ve Mac'te destekleniyor.

Web Share API

Son olarak, kaynak deneme olarak sunulan yeni Web Share API ile yerel paylaşım özelliklerini çağırmanız artık daha kolay. Paul (Mr. Web Intents) Kinlan'ın Navigator Share gönderisinde tüm ayrıntılar yer alıyor.

Kapanış

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

Chrome'la ilgili gelişmelerden haberdar olmak ve yenilikleri öğrenmek için abone olun. Chrome Ekibi'nin üzerinde çalıştığı bazı harika özellikler hakkında daha fazla bilgi edinmek için Chrome Dev Summit videolarına da göz atın.

Adım Pete LePage. Chrome 56 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.