ใหม่ใน Chrome 55

Pete LePage

ดูบน YouTube

• async และ await ช่วยให้คุณเขียนโค้ดที่อิงตามสัญญาได้ราวกับว่าเป็นแบบซิงโครนัส แต่ไม่บล็อกเธรดหลัก
• เหตุการณ์เคอร์เซอร์เป็นวิธีแบบรวมในการจัดการเหตุการณ์การป้อนข้อมูลทั้งหมด
• เว็บไซต์ที่เพิ่มลงในหน้าจอหลักจะได้รับสิทธิ์พื้นที่เก็บข้อมูลถาวรโดยอัตโนมัติ

และยังมีอีกมากมาย

ผมชื่อ Pete LePage มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 55

เหตุการณ์เคอร์เซอร์

การชี้ไปที่สิ่งต่างๆ ในเว็บเคยเป็นเรื่องง่าย คุณมีเมาส์ เลื่อนเมาส์ไปรอบๆ บางครั้งก็กดปุ่ม เท่านี้เอง แต่วิธีนี้ใช้ไม่ได้ผลกับที่นี่

เหตุการณ์การสัมผัสเป็นตัวเลือกที่ดี แต่หากต้องการรองรับการสัมผัสและเมาส์ คุณจะต้องรองรับรูปแบบเหตุการณ์ 2 รูปแบบ ได้แก่

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

แต่โค้ดที่อิงตาม Promise อาจยังอ่านได้ยากเมื่อมีลําดับชั้นของ Dependency แบบไม่พร้อมกันยาว

ตอนนี้ Chrome รองรับคีย์เวิร์ด JavaScript async และ await แล้ว ซึ่งจะช่วยให้คุณเขียน JavaScript ที่ใช้ Promise ได้โดยมีโครงสร้างและอ่านง่ายเหมือนกับโค้ดแบบซิงค์

แต่เราสามารถลดความซับซ้อนของฟังก์ชันแบบไม่พร้อมกันให้เหลือเพียงรูปแบบนี้

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

Jake มีโพสต์ที่ยอดเยี่ยมเกี่ยวกับฟังก์ชันการทำงานแบบแอสซิงค์ - การทำให้ Promise ใช้งานง่ายพร้อมรายละเอียดทั้งหมด

พื้นที่เก็บข้อมูลถาวร

ช่วงทดลองใช้แหล่งที่มาของพื้นที่เก็บข้อมูลถาวรสิ้นสุดแล้ว ตอนนี้คุณสามารถทําเครื่องหมายพื้นที่เก็บข้อมูลเว็บเป็นแบบถาวรได้แล้ว ซึ่งจะป้องกันไม่ให้ 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.");
  });
}

นอกจากนี้ เว็บไซต์ที่มีการมีส่วนร่วมสูง เพิ่มลงในหน้าจอหลัก หรือเปิดใช้ Push Notifications จะได้รับสิทธิ์การคงสถานะโดยอัตโนมัติ

อ่านรายละเอียดทั้งหมดและวิธีขอพื้นที่เก็บข้อมูลถาวรสำหรับเว็บไซต์ได้จากโพสต์พื้นที่เก็บข้อมูลถาวรของ Chris Wilson

การแบ่งคำอัตโนมัติของ CSS

การแบ่งบรรทัดอัตโนมัติของ CSS ซึ่งเป็นหนึ่งในฟีเจอร์การจัดวางที่ผู้ใช้ Chrome ขอมาบ่อยที่สุด ตอนนี้พร้อมให้ใช้งานใน Android และ Mac แล้ว

Web Share API

และสุดท้าย ตอนนี้คุณเรียกใช้ความสามารถในการแชร์แบบเนทีฟได้ง่ายขึ้นด้วย Web Share API ใหม่ ซึ่งมีให้บริการเป็นช่วงทดลองใช้จากต้นทาง Paul (Mr. Web Intents) Kinlan มีรายละเอียดทั้งหมดในโพสต์การแชร์ Navigator

เปิดจากขอบ

การเปลี่ยนแปลงเหล่านี้เป็นเพียงส่วนหนึ่งของการเปลี่ยนแปลงใน Chrome 55 สําหรับนักพัฒนาซอฟต์แวร์

หากต้องการติดตามข่าวสารเกี่ยวกับ Chrome และดูข้อมูลเกี่ยวกับฟีเจอร์ใหม่ๆ ที่กำลังจะมีให้บริการ โปรดสมัครรับข้อมูลและดูวิดีโอจาก Chrome Dev Summit เพื่อเจาะลึกฟีเจอร์เจ๋งๆ ที่ทีม Chrome กำลังพัฒนา

ผมชื่อ Pete LePage และเราจะมาแจ้งให้ทราบถึงสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 56 เปิดตัว