ฟีเจอร์ใหม่ใน Chrome 86

พีต เลอเพจ

Chrome 86 กำลังเริ่มเปิดตัวเป็นเวอร์ชันเสถียรแล้วตอนนี้

สิ่งที่จำเป็นต้องทราบมีดังนี้

ฉันชื่อ Pete LePage ทำงานและถ่ายวิดีโอจากที่บ้าน มาเจาะลึกว่ามีอะไรใหม่ใน Chrome 86 กัน

การเข้าถึงระบบไฟล์

ปัจจุบันคุณสามารถใช้องค์ประกอบ <input type="file"> อ่านไฟล์จากดิสก์ได้ หากต้องการบันทึกการเปลี่ยนแปลง ให้เพิ่ม download ลงในแท็ก Anchor ซึ่งจะแสดงเครื่องมือเลือกไฟล์ จากนั้นบันทึกไฟล์ ไม่มีวิธีเขียนลงในไฟล์ เดียวกันกับที่คุณเปิด น่ารำคาญเวิร์กโฟลว์

เมื่อใช้ File System Access API (ก่อนหน้านี้คือ Native File System API) ซึ่งค่อยๆ เปลี่ยนจากช่วงทดลองใช้จากต้นทาง และตอนนี้มีความเสถียร คุณสามารถเรียกใช้ showOpenFilePicker() ซึ่งจะแสดงเครื่องมือเลือกไฟล์ จากนั้นแสดงแฮนเดิลไฟล์ที่คุณใช้อ่านไฟล์ได้

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

หากต้องการบันทึกไฟล์ลงในดิสก์ คุณจะใช้แฮนเดิลไฟล์เดิมที่ได้มาก่อนหน้านี้หรือเรียกใช้ showSaveFilePicker() เพื่อรับแฮนเดิลไฟล์ใหม่ก็ได้

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
ภาพหน้าจอข้อความแจ้งสิทธิ์
แจ้งเตือนผู้ใช้ที่ขอสิทธิ์ในการเขียนไฟล์

ก่อนที่จะเขียน Chrome จะตรวจสอบว่าผู้ใช้ได้ให้สิทธิ์ในการเขียนหรือไม่ ถ้าไม่มีการให้สิทธิ์เขียน Chrome จะแสดงข้อความแจ้งผู้ใช้ก่อน

การเรียก showDirectoryPicker() จะเปิดไดเรกทอรี ซึ่งช่วยให้คุณดูรายการไฟล์หรือสร้างไฟล์ใหม่ในไดเรกทอรีนั้นได้ เหมาะสำหรับสิ่งต่างๆ เช่น IDE หรือโปรแกรมเล่นสื่อที่โต้ตอบกับไฟล์จำนวนมาก แน่นอนว่าก่อนที่คุณจะเขียนอะไรได้ ผู้ใช้ต้องให้สิทธิ์ในการเขียน

ยังมีความสามารถอื่นๆ อีกมากมายเกี่ยวกับ API ดังนั้น โปรดอ่าน บทความเกี่ยวกับการเข้าถึงระบบไฟล์ใน web.dev

ช่วงทดลองใช้จากต้นทาง: WebHID

อุปกรณ์ควบคุมเกม
อุปกรณ์ควบคุมเกม

อุปกรณ์ที่มีส่วนโต้ตอบกับมนุษย์ หรือที่เรียกกันโดยทั่วไปว่า HID จะรับอินพุตจากหรือให้เอาต์พุตแก่...มนุษย์ อินเทอร์เฟซที่มนุษย์ทำงานมีหลายส่วน ทั้งใหม่ เก่าเกินไป หรือแปลกเกินไปที่ไดรเวอร์อุปกรณ์ของระบบจะเข้าถึงได้

WebHID API ซึ่งตอนนี้พร้อมให้ใช้งานแบบช่วงทดลองใช้จากต้นทาง ช่วยแก้ปัญหานี้ด้วยการระบุวิธีเข้าถึงอุปกรณ์เหล่านี้ใน JavaScript เมื่อใช้ WebHID เกมบนเว็บจะใช้ ประโยชน์สูงสุดจากเกมแพด ซึ่งรวมถึงปุ่ม, จอยสติ๊ก, เซ็นเซอร์, ตัวทริกเกอร์, LED, ชุดเกมแพ็ค และอื่นๆ อีกมากมาย

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

แอปวิดีโอแชทบนเว็บสามารถใช้ปุ่มโทรศัพท์บนลำโพงพิเศษ ในการเริ่มหรือวางสาย ปิดเสียง และอื่นๆ

เครื่องมือเลือกอุปกรณ์ HID
เครื่องมือเลือกอุปกรณ์ HID

แน่นอนว่า API ที่มีประสิทธิภาพเช่นนี้จะโต้ตอบกับอุปกรณ์ได้เมื่อผู้ใช้เลือกอนุญาตอย่างชัดเจนเท่านั้น

ดูการเชื่อมต่อกับอุปกรณ์ HID ที่ผิดปกติ สำหรับรายละเอียดเพิ่มเติม ตัวอย่าง วิธีเริ่มต้นใช้งาน และการสาธิตสุดเจ๋ง


ช่วงทดลองใช้จากต้นทาง: API ตำแหน่งหน้าต่างหลายหน้าจอ

วันนี้คุณสามารถดูพร็อพเพอร์ตี้ของหน้าจอที่หน้าต่างเบราว์เซอร์เปิดอยู่ได้โดยเรียกใช้ window.screen() แต่ถ้าคุณมีการตั้งค่าหลายจอภาพ ขออภัย เบราว์เซอร์จะบอกเฉพาะหน้าจอที่เปิดอยู่เท่านั้น

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Multi-Screen Window Placement API เริ่มช่วงทดลองใช้จากต้นทางใน Chrome 86 ซึ่งช่วยให้คุณแจกแจงหน้าจอที่เชื่อมต่อกับเครื่อง และวางหน้าต่างในหน้าจอที่ต้องการ ความสามารถในการวางหน้าต่างบนหน้าจอที่เจาะจงเป็นสิ่งสำคัญสำหรับสิ่งต่างๆ เช่น แอปงานนำเสนอ แอปบริการทางการเงิน และอื่นๆ

คุณต้องขอสิทธิ์ก่อนจึงจะใช้ API ได้ มิเช่นนั้น เบราว์เซอร์จะแจ้งให้ผู้ใช้ทราบเมื่อคุณพยายามใช้งานครั้งแรก

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

เมื่อผู้ใช้ให้สิทธิ์แล้ว การเรียกใช้ window.getScreens() จะแสดงคำสัญญาที่แปลงด้วยอาร์เรย์ของออบเจ็กต์ Screen

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

จากนั้นผมสามารถใช้ข้อมูลนั้นเมื่อโทรหา requestFullScreen() หรือวางหน้าต่างใหม่ ธนามีรายละเอียดทั้งหมดในบทความการจัดการจอแสดงผลหลายจอด้วย Multi-Screen Window Placement API บน web.dev

และอื่นๆ

ตัวเลือก CSS ใหม่ :focus-visible จะให้คุณเลือกใช้การเรียนรู้แบบเดียวกันกับที่เบราว์เซอร์ใช้เมื่อตัดสินใจว่าจะแสดงตัวบ่งชี้โฟกัสเริ่มต้นหรือไม่

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

คุณปรับแต่งสี ขนาด หรือประเภทของตัวเลขหรือหัวข้อย่อยสำหรับรายการที่มีองค์ประกอบ Pseudo-Element ของ CSS ได้ ::marker

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

และการประชุมสุดยอด Chrome Dev Summit จะจัดขึ้นที่หน้าจอใกล้บ้านคุณ โปรดติดตามข้อมูลเพิ่มเติมในช่อง YouTube ของเรา

อ่านเพิ่มเติม

ส่วนนี้ครอบคลุมไฮไลต์สำคัญเพียงบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่างสำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 86

ติดตาม

หากต้องการติดตามวิดีโอล่าสุดของเรา โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่หรือเพิ่มฟีด RSS ลงในโปรแกรมอ่านฟีด

ผมชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 87 ผมจะบอกคุณว่า มีอะไรใหม่ใน Chrome!