ใหม่ใน Chrome 107

Adriana Jara

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

  • มีพร็อพเพอร์ตี้ใหม่ใน Screen Capture API เพื่อปรับปรุงประสบการณ์การแชร์หน้าจอ
  • ตอนนี้คุณระบุได้อย่างแม่นยำว่าทรัพยากรในหน้าเว็บบล็อกการแสดงผลหรือไม่

  • มีวิธีใหม่ในการส่งข้อมูลไปยังเซิร์ฟเวอร์แบ็กเอนด์ด้วย PendingBeacon API แบบประกาศในเวอร์ชันทดลองใช้แหล่งที่มา และยังมีอีกมากมาย

  • และยังมีอีกมากมาย

ฉันชื่อ Adriana Jara มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 107 กัน

พร็อพเพอร์ตี้ใหม่ใน Screen Capture API

ในเวอร์ชันนี้ Screen Capture API จะเพิ่มพร็อพเพอร์ตี้ใหม่เพื่อปรับปรุงประสบการณ์การแชร์หน้าจอ

DisplayMediaStreamOptions เพิ่มพร็อพเพอร์ตี้ selfBrowserSurface คำแนะนำนี้ช่วยให้แอปพลิเคชันบอกเบราว์เซอร์ได้ว่าเมื่อเรียกใช้ getDisplayMedia() ควรยกเว้นแท็บปัจจุบัน

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

ซึ่งจะช่วยป้องกันไม่ให้จับภาพตัวเองโดยไม่ตั้งใจและหลีกเลี่ยงผล "โถงกระจก" ที่เราเห็นในการประชุมทางวิดีโอ

DisplayMediaStreamOptionsตอนนี้มีพร็อพเพอร์ตี้ surfaceSwitching แล้ว พร็อพเพอร์ตี้นี้จะเพิ่มตัวเลือกในการควบคุมแบบเป็นโปรแกรมว่า Chrome จะแสดงปุ่มสลับแท็บขณะแชร์หน้าจอหรือไม่ ระบบจะส่งตัวเลือกเหล่านี้ไปยัง getDisplayMedia() ปุ่ม Share this tab instead ช่วยให้ผู้ใช้สลับไปยังแท็บใหม่ได้โดยไม่ต้องกลับไปที่แท็บการประชุมทางวิดีโอหรือเลือกจากรายการแท็บจำนวนมาก แต่จะมีการแสดงลักษณะการทำงานแบบมีเงื่อนไขในกรณีที่เว็บแอปพลิเคชันจัดการไม่ได้

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

นอกจากนี้ MediaTrackConstraintSet จะเพิ่มพร็อพเพอร์ตี้ displaySurface ด้วย เมื่อเรียก getDisplayMedia() เบราว์เซอร์จะเสนอตัวเลือกการแสดงผลให้แก่ผู้ใช้ ได้แก่ แท็บ หน้าต่าง หรือจอภาพ เมื่อใช้ข้อจำกัด displaySurface ตอนนี้เว็บแอปอาจบอกใบ้ให้เบราว์เซอร์ทราบหากต้องการนำเสนอแพลตฟอร์มประเภทใดประเภทหนึ่งให้โดดเด่นกว่า

เช่น ช่วยป้องกันการแชร์มากเกินไปโดยไม่ได้ตั้งใจ เนื่องจากการแชร์แท็บเดียวเป็นค่าเริ่มต้นได้ ภาพหน้าจอของข้อความแจ้งเครื่องมือเลือกสื่อแบบเก่าและแบบใหม่

ระบุทรัพยากรที่บล็อกการแสดงผล

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

ตอนนี้ Performance API มีพร็อพเพอร์ตี้ renderBlockingStatus ซึ่งให้สัญญาณโดยตรงจากเบราว์เซอร์ที่ระบุทรัพยากรที่ป้องกันไม่ให้หน้าเว็บแสดงจนกว่าจะมีการดาวน์โหลด

ข้อมูลโค้ดที่นี่แสดงวิธีรับรายการทรัพยากรทั้งหมดและใช้พร็อพเพอร์ตี้renderการควบคุมStatus ใหม่เพื่อแสดงทรัพยากรทั้งหมดที่บล็อกการแสดงผล

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

การเพิ่มประสิทธิภาพวิธีโหลดทรัพยากรจะช่วยในเรื่อง Core Web Vitals และมอบประสบการณ์การใช้งานที่ดีขึ้น ดูข้อมูลเพิ่มเติมเกี่ยวกับ Performance API ในเอกสารประกอบของ MDN, มองหาทรัพยากรที่บล็อกการแสดงผล แล้วเพิ่มประสิทธิภาพ

ช่วงทดลองใช้ PendingBeacon API จากต้นทาง

PendingBeacon API แบบประกาศช่วยให้เบราว์เซอร์ควบคุมได้ว่าจะส่งบีคอนเมื่อใด

บีคอนคือกลุ่มข้อมูลที่ส่งไปยังเซิร์ฟเวอร์แบ็กเอนด์โดยไม่ได้คาดหวังการตอบกลับใดๆ

แอปพลิเคชันมักต้องการส่งบีคอนเหล่านี้เมื่อสิ้นสุดการเข้าชมของผู้ใช้ แต่ไม่มีเวลาที่เหมาะสมสำหรับการเรียกใช้ "send" API นี้จะมอบสิทธิ์การส่งให้กับเบราว์เซอร์เอง เพื่อให้รองรับบีคอนใน page unload หรือใน page hide ได้โดยไม่ต้องให้นักพัฒนาซอฟต์แวร์เรียกใช้การส่งในเวลาที่ถูกต้อง

โปรดลงชื่อสมัครทดลองใช้ต้นทาง ลองใช้ API และส่งความคิดเห็นมาให้เราเพื่อปรับปรุง Use Case

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

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

  • ส่วนหัว HTTP ของ expect-ct เลิกใช้งานแล้ว
  • ขณะนี้ระบบรองรับแอตทริบิวต์ rel ในองค์ประกอบ <form> แล้ว
  • ครั้งล่าสุดที่ฉันพูดถึงgrid-template การประมาณค่า ครั้งนี้ควรรวมไว้ด้วย

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

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

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

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

ฉันชื่อ Adriana Jara และพร้อมที่จะแจ้งให้คุณทราบเกี่ยวกับฟีเจอร์ใหม่ๆ ใน Chrome ทันทีที่ Chrome 108 เปิดตัว