Baru di Chrome 55

Tonton di YouTube

• async dan await memungkinkan Anda menulis kode berbasis promise seolah-olah kode tersebut sinkron, tetapi tanpa memblokir thread utama.
• Peristiwa pointer memberikan cara terpadu untuk menangani semua peristiwa input.
• Situs yang ditambahkan ke layar utama akan otomatis diberi izin penyimpanan persisten.

Dan masih banyak lagi.

Saya Pete LePage, berikut beberapa hal baru untuk developer di Chrome 55.

Peristiwa Penunjuk

Mengarahkan ke hal-hal di web dulunya sederhana. Anda memiliki {i>mouse<i}, Anda memindahkannya, kadang-kadang Anda menekan tombol, dan itu dia. Tapi, cara ini tidak bekerja dengan baik di sini.

Peristiwa sentuh memang bagus, tetapi untuk mendukung sentuhan dan mouse, Anda harus mendukung dua model peristiwa:

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

Chrome kini memungkinkan penanganan input terpadu dengan mengirimkan PointerEvents:

elem.addEventListener('pointermove', pointerMoveEvent);

Peristiwa pointer menyatukan model input pointer untuk browser, yang menghadirkan sentuhan, pena, dan mouse menjadi satu kumpulan peristiwa. Dukungan ini didukung di IE11, Edge, Chrome, Opera, dan didukung sebagian di Firefox.

Lihat Menunjuk Jalan ke Depan untuk detail selengkapnya.

async dan await

JavaScript asinkron bisa jadi sulit untuk alasan. Ambil fungsi ini dengan semua callback yang "bagus":

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();
}

Menulis ulang dengan promises akan membantu menghindari masalah penyusunan bertingkat:

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

Namun, kode berbasis Promise mungkin masih sulit dibaca jika ada rantai dependensi asinkron yang panjang.

Chrome kini mendukung kata kunci JavaScript async dan await, sehingga Anda dapat menulis JavaScript berbasis Promise, yang dapat terstruktur dan dapat dibaca seperti kode sinkron.

Sebagai gantinya, fungsi asinkron dapat disederhanakan menjadi:

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

Jake memiliki postingan yang bagus: Fungsi Asinkron - membuat promise yang sesuai dengan semua detailnya.

Penyimpanan Persistent

Uji coba origin penyimpanan persisten kini telah berakhir. Sekarang Anda dapat menandai penyimpanan web sebagai persisten, sehingga mencegah Chrome menghapus penyimpanan untuk situs Anda secara otomatis.

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

Selain itu, situs yang memiliki interaksi tinggi, telah ditambahkan ke layar utama, atau mengaktifkan notifikasi push akan otomatis diberi izin persistensi.

Lihat postingan Persistent Storage Chris Wilson untuk mengetahui detail selengkapnya dan cara meminta penyimpanan persisten untuk situs Anda.

Tanda Hubung Otomatis CSS

Tanda hubung otomatis CSS, salah satu fitur tata letak Chrome yang paling sering diminta kini didukung di Android dan Mac.

Web Share API

Dan terakhir, sekarang lebih mudah untuk memanggil kemampuan berbagi native dengan Web Share API baru, yang tersedia sebagai uji coba origin. Paul (Mr. Web Intent) Kinlan memiliki semua detail di postingan Navigator Share miliknya.

Penutup

Ini hanyalah beberapa perubahan di Chrome 55 untuk developer.

Jika Anda ingin terus mengikuti info terbaru tentang Chrome dan mengetahui fitur-fitur yang akan hadir, pastikan untuk berlangganan, dan pastikan untuk menonton video dari Chrome Dev Summit untuk mempelajari lebih dalam beberapa hal menakjubkan yang sedang dikerjakan tim Chrome.

Saya Pete LePage, dan segera setelah Chrome 56 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!