ใหม่ใน Chrome 100

Pete LePage

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

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

Chrome 100

เมื่อเบราว์เซอร์ไปถึงเวอร์ชัน 10 เป็นครั้งแรก มีปัญหาอยู่ 2-3 ข้อเนื่องจากหมายเลขเวอร์ชันหลักเปลี่ยนจาก 1 เป็น 2 หวังว่าเราได้เรียนรู้บางสิ่งที่จะช่วยให้คุณเปลี่ยนจากตัวเลข 2 หลักไปเป็น 3 หลักแล้ว

โลโก้ Chrome และ Firefox

Chrome 100 พร้อมใช้งานแล้วและ Firefox 100 จะเปิดให้ใช้งานเร็วๆ นี้ หมายเลขเวอร์ชัน 3 หลักนี้อาจทำให้เกิดปัญหาในเว็บไซต์ที่ต้องใช้การระบุเวอร์ชันของเบราว์เซอร์ในลักษณะใดลักษณะหนึ่ง ในช่วง 2-3 เดือนที่ผ่านมา ทีม Firefox และทีม Chrome ได้ทำการทดลองซึ่งเบราว์เซอร์ ได้รายงานหมายเลขเวอร์ชัน 100 แม้ว่าจะไม่ได้เป็นเช่นนั้นก็ตาม

การดำเนินการนี้ทำให้เกิดปัญหาที่มีการรายงาน 2-3 รายการ ซึ่งส่วนใหญ่ได้รับการแก้ไขแล้ว แต่เรายังคงต้องการความช่วยเหลือจากคุณ

  • หากคุณเป็นผู้ดูแลเว็บไซต์ ให้ทดสอบเว็บไซต์กับ Chrome และ Firefox 100
  • หากคุณพัฒนาไลบรารีการแยกวิเคราะห์ User Agent ให้เพิ่มการทดสอบในการแยกวิเคราะห์เวอร์ชันที่มากกว่าและเท่ากับ 100

ดูรายละเอียดเพิ่มเติมได้ที่ Chrome และ Firefox เร็วๆ นี้เพื่อเข้าถึงเวอร์ชันหลัก 100 บน web.dev

ช่วงเวลาสำคัญบนเว็บ 100 ช่วง

รูปภาพโปรโมตช่วงเวลาสำคัญของเว็บ 100 รายการ

สิ่งที่น่าตื่นเต้นมากที่ได้เห็นเว็บไซต์เติบโตและสิ่งต่างๆ ที่น่าตื่นตาตื่นใจ ที่คุณได้สร้างขึ้นใน Chrome 100 รุ่นที่ผ่านมา เราคิดว่าคงจะสนุกดีหากได้เดินเล่น รำลึกความหลังและเฉลิมฉลอง #100CoolWebช่วงเวลา ที่เกิดขึ้นในช่วง 14 ปีที่ผ่านมา

บอกเราว่าคุณชอบช่วงเวลาไหนมากที่สุด หากพลาดอะไรไป (และแน่นอน) ทวีตเรา @Chromiumdev พร้อมพิมพ์ #100CoolWebช่วงเวลา ขอให้สนุกกับการรับชม

สตริง User Agent ที่ลดลง

เมื่อพูดถึง User Agent แล้ว Chrome 100 จะเป็นเวอร์ชันล่าสุดที่รองรับสตริง User-Agent แบบไม่ลดลงโดยค่าเริ่มต้น นี่เป็นส่วนหนึ่งของกลยุทธ์การแทนที่การใช้สตริง User-Agent ด้วย User-Agent Client Hints API ใหม่

ตั้งแต่ Chrome 101 เป็นต้นไป User Agent จะค่อยๆ ลดลง

ดูข้อมูลเพิ่มเติมเกี่ยวกับรายการที่จะนำออกและเวลาที่จะนำออกได้ที่ช่วงทดลองใช้และวันที่ของการลด User Agent ใน [บล็อก Chromium][crblog]

API ตำแหน่งหน้าต่างสำหรับหลายหน้าจอ

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

Multi-Screen Window Placement API ช่วยให้สามารถแจกแจงจอแสดงผลที่เชื่อมต่อกับเครื่องของผู้ใช้และวางหน้าต่างไว้บนหน้าจอที่เจาะจงได้

คุณจะตรวจสอบได้อย่างรวดเร็วว่ามีหน้าจอมากกว่า 1 หน้าจอเชื่อมต่อกับอุปกรณ์ด้วย window.screen.isExtended หรือไม่

const isExtended = window.screen.isExtended;
// returns true/false

แต่ฟังก์ชันหลักอยู่ใน window.getScreenDetails() ซึ่งให้รายละเอียดเกี่ยวกับจอแสดงผลที่แนบมา

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

เช่น คุณกำหนดหน้าจอหลักได้ แล้วใช้ requestFullscreen() เพื่อทำให้องค์ประกอบเต็มหน้าจอในจอแสดงผลนั้น

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

ทั้งยังบอกวิธีฟังการเปลี่ยนแปลง เช่น หากมีการเสียบปลั๊กหรือถอดจอแสดงผลใหม่ออก ระบบก็จะเปลี่ยนความละเอียด เป็นต้น

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

อ่านบทความอัปเดตของ Tom การจัดการจอแสดงผลหลายจอด้วย Multi-Screen Window Placement API ใน web.dev เพื่อดูข้อมูลเจาะลึกยิ่งขึ้น

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

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

มีเมธอด forget() ใหม่สำหรับอุปกรณ์ HID ที่ช่วยให้คุณเพิกถอนสิทธิ์สำหรับอุปกรณ์ HID ที่ผู้ใช้ให้สิทธิ์ได้

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

และสำหรับ WebNFC เมธอด makeReadOnly() ช่วยให้คุณทำให้แท็ก NFC เป็นแบบอ่านอย่างเดียวแบบถาวรได้

const ndef = new NDEFReader();
await ndef.makeReadOnly();

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

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

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

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

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