ใหม่ใน 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 รายการนี้ไม่ปลอดภัย ซึ่งหมายความว่าไม่ได้มีการทำความสะอาดอินพุตใดๆ ดังนั้นคุณต้องดูให้แน่ใจว่าสิ่งที่คุณให้อาหารมันปลอดภัย ในรุ่นที่กำลังจะเปิดตัว เราคาดว่าจะเห็นเวอร์ชันที่มีการแก้ไขอินพุต

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

API สตรีม WebSocket

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

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

ซึ่งนั่นเรียกว่าความกดดันย้อนกลับและอาจทำให้คุณปวดหัวรุนแรงได้ ขออภัย 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() ข้อมูลไปแล้วหลังจากนั้น

ดูการปรับปรุงการเปลี่ยน

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

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

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

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

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

แน่นอน ยังมีคำถามอีกมากมาย

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

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

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

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

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

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

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

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