ใหม่ใน 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 Notification จะได้รับสิทธิ์การคงสถานะโดยอัตโนมัติ

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

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

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

Web Share API

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

เปิดจากขอบ

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

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

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