ใหม่ใน Chrome 107

Adriana Jara

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

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

คุณสมบัติใหม่ใน API จับภาพหน้าจอ

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

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

// 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 และส่งความคิดเห็นเกี่ยวกับวิธีปรับปรุงกรณีการใช้งานของเรา

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

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

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

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

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

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

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

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