ใหม่ใน Chrome 124

Pete LePage

ไฮไลต์ใน Chrome 124 มีดังนี้

หากต้องการดูรายละเอียดทั้งหมด อ่านบันทึกประจำรุ่นของ Chrome 124

ใช้ Shadow DOM แบบประกาศใน JavaScript

มี API ใหม่ 2 รายการที่อนุญาตให้ใช้ Shadow DOM แบบประกาศจาก JavaScript

setHTMLUnsafe() คล้ายกับ innerHTML และให้คุณตั้งค่า HTML ภายในขององค์ประกอบเป็นสตริงที่ระบุ ซึ่งจะมีประโยชน์เมื่อคุณมี HTML ที่มี Shadow DOM แบบประกาศ เช่น ตัวอย่างนี้

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

หากคุณใช้เพียง innerHTML เบราว์เซอร์จะไม่แยกวิเคราะห์อย่างถูกต้องและจะไม่มี Shadow DOM แต่ setHTMLUnsafe() จะสร้าง Shadow DOM และแยกวิเคราะห์องค์ประกอบตามที่คาดไว้

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

API อีกรายการหนึ่งคือ parseHTMLUnsafe() ซึ่งทำงานคล้ายกับ DOMParser.parseFromString()

API ทั้ง 2 รายการนี้ไม่ปลอดภัย ซึ่งหมายความว่าไม่มีการทำให้อินพุตปลอดภัย คุณจึงควรตรวจสอบว่าอาหารที่คุณให้สัตว์เลี้ยงปลอดภัย ในรุ่นที่กำลังจะเปิดตัว เราคาดว่าจะเห็นเวอร์ชันที่มีการล้างข้อมูลอินพุต

สุดท้ายนี้ Firefox และ Safari เวอร์ชันล่าสุดรองรับทั้ง 2 API นี้แล้ว

WebSocket Stream API

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

แต่จะเกิดอะไรขึ้นหากข้อมูลเข้ามาเร็วกว่าที่คุณสามารถจัดการได้

อาการนี้เรียกว่าแรงดันย้อนกลับ และอาจทำให้เกิดอาการปวดหัวอย่างรุนแรง ขออภัย WebSocket API ไม่มีวิธีจัดการกับแรงกดดันจากด้านหลัง

WebSocket Stream API ช่วยให้คุณใช้ประโยชน์จากสตรีมและเว็บโซケットได้ ซึ่งหมายความว่าคุณจะใช้แบ็กเพรสเชอร์ได้โดยไม่มีค่าใช้จ่ายเพิ่มเติม

เริ่มต้นด้วยการสร้าง WebSocketStream ใหม่และส่ง URL ของเซิร์ฟเวอร์ WebSocket

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

จากนั้นรอให้การเชื่อมต่อเปิดขึ้น ซึ่งจะแสดง ReadableStream และ WritableStream การเรียกใช้เมธอด ReadableStream.getReader() จะทำให้คุณได้รับ ReadableStreamDefaultReader ซึ่งคุณสามารถ read() ข้อมูลได้จนกว่าสตรีมจะเสร็จสมบูรณ์

หากต้องการเขียนข้อมูล ให้เรียกใช้เมธอด WritableStream.getWriter() ซึ่งจะให้ WritableStreamDefaultWriter แก่คุณ จากนั้นคุณสามารถ write() ข้อมูลไปยัง WritableStreamDefaultWriter ได้

ดูการปรับปรุงทรานซิชัน

เราตื่นเต้นกับฟีเจอร์การเปลี่ยนมุมมอง และ Chrome 124 ยังมีฟีเจอร์ใหม่ 2 รายการที่ออกแบบมาเพื่อช่วยให้การเปลี่ยนมุมมองง่ายขึ้น

ระบบจะเรียกเหตุการณ์ pageswap บนออบเจ็กต์หน้าต่างของเอกสารเมื่อการนําทางจะแทนที่เอกสารด้วยเอกสารใหม่

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

และการบล็อกการแสดงผลเอกสารที่ช่วยให้คุณบล็อกการแสดงผลเอกสารได้จนกว่าระบบจะแยกวิเคราะห์เนื้อหาที่สำคัญ เพื่อให้การแสดงผลครั้งแรกสอดคล้องกันในเบราว์เซอร์ทุกประเภท

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

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

  • disallowReturnToOpener บอกใบ้ให้เบราว์เซอร์ไม่ควรแสดงปุ่มในหน้าต่างแบบภาพในภาพซึ่งช่วยให้ผู้ใช้กลับไปที่แท็บที่เปิดได้

  • คอนเทนเนอร์การเลื่อนที่โฟกัสได้ด้วยแป้นพิมพ์ช่วยเพิ่มความพร้อมใช้งานโดยทำให้คอนเทนเนอร์การเลื่อนโฟกัสได้โดยใช้การไปยังส่วนต่างๆ ตามลำดับ

  • และการติดตั้งแบบสากลช่วยให้ผู้ใช้ติดตั้งหน้าเว็บใดก็ได้ แม้ว่าหน้าเว็บเหล่านั้นจะไม่เป็นไปตามเกณฑ์ PWA ปัจจุบันก็ตาม

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

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

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

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

ผมชื่อ Pete LePage และเราจะคอยแจ้งให้คุณทราบเกี่ยวกับฟีเจอร์ใหม่ๆ ใน Chrome ทันทีที่ Chrome 125 เปิดตัว