ใหม่ใน Chrome 107

Adriana Jara

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

ฉันชื่อ 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);

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

ตอนนี้ 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 ซึ่งให้สัญญาณโดยตรงจากเบราว์เซอร์ที่ระบุทรัพยากรที่ป้องกันไม่ให้หน้าเว็บแสดงจนกว่าจะดาวน์โหลดเสร็จ

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

// 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 และมอบประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้น ดูเอกสารประกอบของ MDN เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ Performance API, ค้นหาทรัพยากรที่บล็อกการแสดงผลเหล่านั้น และเพิ่มประสิทธิภาพ

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

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

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

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

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

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

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

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

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

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

ติดตาม

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

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