สิ่งที่จำเป็นต้องทราบมีดังนี้
- Chrome 100 มีหมายเลขเวอร์ชัน 3 หลัก
- เรามาย้อนความหลังและเฉลิมฉลองให้กับ #100CoolWebช่วงเวลาตั้งแต่การเปิดตัว Chrome ครั้งแรกกัน
- มีการเปลี่ยนแปลงที่สำคัญบางอย่างกับสตริง User Agent
- API ตำแหน่งหน้าต่างหลายหน้าจอช่วยให้แจกแจงจอแสดงผลที่เชื่อมต่อกับเครื่องของผู้ใช้ และวางหน้าต่างไว้บนหน้าจอที่เจาะจงได้
- นอกจากนี้ยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage มาเจาะลึกกันเลยและดูว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 100
Chrome 100
เมื่อเบราว์เซอร์ไปถึงเวอร์ชัน 10 เป็นครั้งแรก มีปัญหาอยู่ 2-3 ข้อเนื่องจากหมายเลขเวอร์ชันหลักเปลี่ยนจาก 1 เป็น 2 หวังว่าเราได้เรียนรู้บางสิ่งที่จะช่วยให้คุณเปลี่ยนจากตัวเลข 2 หลักไปเป็น 3 หลักแล้ว
Chrome 100 พร้อมใช้งานแล้วและ Firefox 100 จะเปิดให้ใช้งานเร็วๆ นี้ หมายเลขเวอร์ชัน 3 หลักนี้อาจทำให้เกิดปัญหาในเว็บไซต์ที่ต้องใช้การระบุเวอร์ชันของเบราว์เซอร์ในลักษณะใดลักษณะหนึ่ง ในช่วง 2-3 เดือนที่ผ่านมา ทีม Firefox และทีม Chrome ได้ทำการทดลองซึ่งเบราว์เซอร์ ได้รายงานหมายเลขเวอร์ชัน 100 แม้ว่าจะไม่ได้เป็นเช่นนั้นก็ตาม
การดำเนินการนี้ทำให้เกิดปัญหาที่มีการรายงาน 2-3 รายการ ซึ่งส่วนใหญ่ได้รับการแก้ไขแล้ว แต่เรายังคงต้องการความช่วยเหลือจากคุณ
- หากคุณเป็นผู้ดูแลเว็บไซต์ ให้ทดสอบเว็บไซต์กับ Chrome และ Firefox 100
- หากคุณพัฒนาไลบรารีการแยกวิเคราะห์ User Agent ให้เพิ่มการทดสอบในการแยกวิเคราะห์เวอร์ชันที่มากกว่าและเท่ากับ 100
ดูรายละเอียดเพิ่มเติมได้ที่ Chrome และ Firefox เร็วๆ นี้เพื่อเข้าถึงเวอร์ชันหลัก 100 บน web.dev
ช่วงเวลาสำคัญบนเว็บ 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
- มีอะไรใหม่ใน Chrome DevTools (100)
- การเลิกใช้งานและการนำ Chrome 100 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 100
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 101 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!