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

Pete LePage

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

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

ผมชื่อ Pete LePage ทำงานและถ่ายทำจากที่บ้าน เรามาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 86 กัน

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

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

เมื่อใช้ 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 ที่ไม่ใช่แบบที่ใช้กันทั่วไป


ช่วงทดลองใช้จากต้นทาง: Multi-Screen Window Placement 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() จะแสดงผลเป็น Promise ที่แสดงผลด้วยอาร์เรย์ของออบเจ็กต์ 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() หรือเปิดหน้าต่างใหม่ Tom มีรายละเอียดทั้งหมดในบทความการจัดการจอแสดงผลหลายจอด้วย 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);
}

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

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

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

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

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

สมัครใช้บริการ

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

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