ใหม่ใน 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 ของ Datagram API อย่างไม่เสถียร ซึ่งระบบรองรับในเว็บเวิร์กเกอร์ และเนื่องจากช่วยให้เห็นอินเทอร์เฟซที่เป็นไปตามข้อกำหนดของสตรีม จึงรองรับการเพิ่มประสิทธิภาพด้าน Backpress

หากต้องการใช้ คุณจะต้องมีเซิร์ฟเวอร์ที่รองรับ 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 เปิดตัว