ใหม่ใน Chrome 97

Pete LePage

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

สุขสันต์วันปีใหม่! และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 97 กัน

Web Transport

หากคุณใช้ Web Sockets หรือ WebRTC Data Channel API เพื่อส่งข้อความระหว่างเซิร์ฟเวอร์กับหน้าเว็บ คุณจะมีตัวเลือกใหม่ WebTransport เป็น API ใหม่ที่ให้บริการการรับส่งข้อความแบบไคลเอ็นต์-เซิร์ฟเวอร์แบบ 2 ทิศทางที่มีเวลาในการตอบสนองต่ำ

โดย Web Transport API มีค่าเวลาในการตอบสนองต่ำกว่า WebSockets และแตกต่างจาก RTC Data Channel API ที่ออกแบบมาเพื่อการรับส่งข้อความแบบ Peer-to-Peer เนื่องจาก Web Transport API ออกแบบมาเพื่อการรับส่งข้อความแบบไคลเอ็นต์-เซิร์ฟเวอร์โดยเฉพาะ

โดยรองรับการส่งข้อมูลอย่างน่าเชื่อถือด้วย API สตรีม และไม่น่าเชื่อถือด้วย API ดาตาแกรม ซึ่งระบบรองรับในเว็บเวิร์กเกอร์ และเนื่องจากมีการเปิดเผยอินเทอร์เฟซที่เป็นไปตามมาตรฐาน Streams จึงรองรับการเพิ่มประสิทธิภาพเกี่ยวกับแรงดันย้อนกลับ

หากต้องการใช้ คุณจะต้องมีเซิร์ฟเวอร์ที่รองรับ HTTP/3 ซึ่งโดยทั่วไปแล้วง่ายกว่าการตั้งค่าและการดูแลรักษาเซิร์ฟเวอร์ WebRTC เปิดอินสแตนซ์ WebTransport ใหม่ รอให้เชื่อมต่อ แล้วเริ่มส่งข้อมูลได้

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

อ่านรายละเอียดทั้งหมดได้ในบทความการทดสอบ WebTransport ใน web.dev

การตรวจหาฟีเจอร์ประเภทสคริปต์

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

ป้อน HTMLScriptElement.supports() คุณสามารถใช้เพื่อระบุประเภทสคริปต์ที่คุณใช้ได้ และส่งตัวเลือกที่ดีที่สุดไปยังเบราว์เซอร์

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

อาร์เรย์โปรโตไทป์ใหม่

เราชอบที่ JavaScript ใช้งานได้ง่ายขึ้น ตอนนี้ Array และ TypedArray รองรับเมธอดแบบคงที่ findLast() และ findLastIndex() แล้ว

ฟังก์ชันเหล่านี้มีประสิทธิภาพเหมือนกับ find() และ findIndex() แต่ค้นหาจากส่วนท้ายของอาร์เรย์แทนที่จะเป็นจากส่วนต้น

เช่น หากต้องการค้นหาตัวเลขสุดท้ายในอาร์เรย์ที่มากกว่า 10 ให้เรียกใช้ findLast() ด้วยฟังก์ชันทดสอบที่ตรวจสอบว่าค่ามากกว่า 10 หรือไม่

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

จำลอง Chrome 100 ในสตริง UA

อีกไม่กี่เดือนข้างหน้า เราจะเปิดตัว Chrome เวอร์ชัน 100 ซึ่งเป็นเวอร์ชันที่มีตัวเลข 3 หลัก โค้ดที่ตรวจสอบหมายเลขเวอร์ชันหรือแยกวิเคราะห์สตริง UA ควรได้รับการตรวจสอบว่ารองรับตัวเลข 3 หลัก

มี Flag ชื่อ #force-major-version-to-100 ที่จะเปลี่ยนหมายเลขเวอร์ชันปัจจุบันเป็น 100 เพื่อให้คุณตรวจสอบได้ว่าทุกอย่างทำงานได้ตามที่คาดไว้

หน้า Flag ของ Chrome ที่ไฮไลต์ตัวเลือก #force-major-version-to-100 ใหม่

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

แน่นอนว่ายังมีอีกมากมาย

ตอนนี้บรรทัดใหม่ในรายการแบบฟอร์มจะเป็นมาตรฐานในลักษณะเดียวกับ Gecko และ WebKit ซึ่งจะช่วยปรับปรุงความสามารถในการทำงานร่วมกันระหว่างเบราว์เซอร์

เรากําลังกําหนดมาตรฐานชื่อคำแนะนำไคลเอ็นต์โดยใส่ sec-ch ไว้ข้างหน้า เช่น dpr จะกลายเป็น sec-ch-dpr เราจะยังคงรองรับคำแนะนำเหล่านี้ในเวอร์ชันที่มีอยู่ต่อไป แต่คุณควรวางแผนสำหรับการเลิกใช้งานและนําออกในที่สุด

ตอนนี้คุณค้นหาองค์ประกอบ <details> ที่ปิดอยู่และลิงก์กับองค์ประกอบนั้นได้ องค์ประกอบที่ซ่อนอยู่เหล่านี้จะขยายโดยอัตโนมัติเมื่อใช้การค้นหาในหน้าเว็บ ScrollToTextFragment และการนำทางไปยังส่วนต่างๆ ขององค์ประกอบ

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

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

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

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

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