หน้านี้ได้รับการแปลโดย Cloud Translation API

ใหม่ใน Chrome 100

Pete LePage

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

Chrome 100 มีหมายเลขเวอร์ชัน 3 หลัก
ย้อนรำลึกความทรงจำและร่วมฉลอง#100CoolWebMoments นับตั้งแต่ Chrome เปิดตัวครั้งแรก
มีการเปลี่ยนแปลงที่สำคัญบางอย่างกับสตริง User Agent
Multi-Screen Window Placement API ช่วยให้คุณระบุจอแสดงผลที่เชื่อมต่อกับเครื่องของผู้ใช้ และวางหน้าต่างในบางหน้าจอได้
นอกจากนี้ยังมีอีกมากมาย

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ เรามาเจาะลึกและดูว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 100 กัน

Chrome 100

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

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

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

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

ดูรายละเอียดเพิ่มเติมได้ที่Chrome และ Firefox กำลังจะเข้าสู่เวอร์ชันหลัก 100 ใน web.dev

100 ช่วงเวลาเจ๋งๆ บนเว็บ

รูปภาพโปรโมต 100 ช่วงเวลาเจ๋งๆ บนเว็บ

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

บอกเราว่าช่วงเวลาใดที่คุณชอบมากที่สุด หากเราพลาดอะไรไป (ซึ่งเรามั่นใจว่าพลาด) โปรดทวีตหาเราที่ @Chromiumdev พร้อมใช้แฮชแท็ก #100CoolWebMoments ขอให้สนุกกับการรับชม

สตริง 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!