ใหม่ใน 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

การแบ่งบรรทัดอัตโนมัติของ 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 เปิดตัว