ใหม่ใน 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 เปิดตัว