สิ่งที่จำเป็นต้องทราบมีดังนี้
- การกำหนดเส้นทางจะง่ายขึ้นด้วยการใส่
URLPattern
ลงในเบราว์เซอร์ - Eye Dropper API มีเครื่องมือในตัวสำหรับเลือกสี
- มีช่วงทดลองใช้จากต้นทางใหม่ที่ช่วยให้คุณเลือกรับสตริง UA ที่ลดลงได้ในตอนนี้
- วิดีโอการประชุมสุดยอด PWA จะเป็นแบบออนไลน์ทั้งหมด
- นอกจากนี้ยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage ทำงานและถ่ายทำ จากที่บ้าน มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 95 กัน
กำลังกำหนดเส้นทางด้วย URLPattern
เว็บแอปเกือบทั้งหมดอาศัยการกำหนดเส้นทางในทางใดทางหนึ่ง ไม่ว่าจะเป็นโค้ดที่ทำงานบนเซิร์ฟเวอร์ที่แมปเส้นทางไปยังไฟล์ในดิสก์หรือตรรกะในแอปแบบหน้าเดียวที่อัปเดต DOM เมื่อ URL เปลี่ยนแปลง URLPattern
คือ API แพลตฟอร์มเว็บใหม่ที่ทำให้ไวยากรณ์รูปแบบการกำหนดเส้นทางเป็นมาตรฐานเดียวกัน
โดยต่อยอดจากพื้นฐานของเฟรมเวิร์กที่มีอยู่ ทำให้ทำงานเกี่ยวกับการกำหนดเส้นทางทั่วไปได้ง่ายขึ้น เช่น การจับคู่กับ URL แบบเต็มหรือชื่อเส้นทาง URL แล้วแสดงผลข้อมูลเกี่ยวกับโทเค็นและกลุ่มที่ตรงกัน
คุณอาจคุ้นเคยกับไวยากรณ์การกำหนดเส้นทางที่ใช้ใน Express, Ruby on Rails หรือ path-to-regexp ดีอยู่แล้ว
หากต้องการใช้งาน ให้สร้าง URLPattern()
ใหม่และระบุรายละเอียดที่คุณต้องการจับคู่รูปแบบ รูปแบบสามารถประกอบด้วยไวลด์การ์ด กลุ่มโทเค็นที่มีชื่อ กลุ่มนิพจน์ทั่วไป และตัวปรับแต่งกลุ่ม
const p = new URLPattern({
protocol: 'https',
hostname: 'example.com',
pathname: '/:folder/*/:fileName.jpg',
search: '*',
hash: '*',
});
ลองดูตัวอย่าง URLPattern
ที่ Google เอกสารอาจใช้
เราจะระบุ kind
ของไฟล์, ไฟล์ ID
และ mode
ที่จะเปิดไฟล์
จากนั้นในการใช้รูปแบบ เราสามารถเรียกใช้ test()
หรือ exec()
const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';
const pattern = new URLPattern({
pathname: '/:kind/d/:fileID/:mode',
hash: '*',
});
const r = pattern.exec(url);
// {
// "pathname": {"groups": {
// "fileID": "1s...5c",
// "kind": "document",
// "mode": "edit"
// }, ...},
// "hash": {"groups": {"0":"heading=h.8...c"}, ...},
// ...
// }
URLPattern
จะเปิดใช้โดยค่าเริ่มต้นใน Chrome และ Edge เวอร์ชัน 95 ขึ้นไป
และสำหรับเบราว์เซอร์หรือสภาพแวดล้อม เช่น โหนด ที่ยังไม่รองรับ คุณสามารถใช้ไลบรารี urlpattern-polyfill
ดูรายละเอียดทั้งหมดในบทความ URLPattern ที่นำการกำหนดเส้นทางไปยังแพลตฟอร์มเว็บของเจฟฟ์
การเลือกสีด้วย Eye Dropper API
แอปออกแบบแทบทุกแอปที่ฉันเคยใช้มีเครื่องมือหลอดดูดสี ซึ่งทำให้รู้ได้ง่ายว่าสีอะไร
บางเบราว์เซอร์มีหลอดดูดสีอยู่ใน <input type=color>
แต่ไม่ใช่แบบนั้น
API หลอดดูดซึ่งติดตั้งใช้งานโดยพนักงานบางส่วนที่ Microsoft ได้นำฟังก์ชันดังกล่าวมาสู่เว็บ หากต้องการใช้งาน ให้สร้างอินสแตนซ์ EyeDropper()
ใหม่ จากนั้นเรียก open()
บนอินสแตนซ์นั้น
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}
ซึ่งจะทำงานแบบไม่พร้อมกันเพื่อไม่ให้บล็อกเทรดหลัก เช่นเดียวกับ API ของเว็บสมัยใหม่อื่นๆ เมื่อผู้ใช้คลิกสีที่ต้องการ ระบบจะเลือกสีที่คลิก
คุณสามารถลองใช้การสาธิตสั้นๆ และดูโค้ดใน Glitch
การประชุมสุดยอด PWA
คุณได้ติดตามการประชุมสุดยอด PWA เมื่อต้นเดือนนี้ไหม
เราดีใจที่ได้เห็นหลายๆ คนพูดถึง PWA และแชร์ประสบการณ์ หากพลาดไป วิดีโอทั้งหมดพร้อมแล้ว อย่าลืมเข้าไปดูได้ที่ PWASummit.org หรือช่อง YouTube ของ PWA Summit
ช่วงทดลองใช้การลด User Agent จากต้นทาง
การลด User Agent เป็นความพยายามในการลดพื้นที่สำหรับพิมพ์ลายนิ้วมือแบบแพสซีฟ โดยการลดข้อมูลในสตริง User Agent ให้เหลือเพียงแบรนด์และเวอร์ชันที่สำคัญของเบราว์เซอร์ ความแตกต่างระหว่างเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ และแพลตฟอร์มที่เบราว์เซอร์ทำงานอยู่
ตั้งแต่ Chrome 95 เป็นต้นไปจะมีช่วงทดลองใช้จากต้นทางใหม่ซึ่งให้คุณเลือกรับสตริง UA ที่ลดลงได้เลย วิธีนี้จะช่วยให้คุณค้นพบและแก้ไขปัญหาก่อนที่ UA ที่ลดลงจะกลายเป็นลักษณะการทำงานเริ่มต้นใน Chrome
การเปลี่ยนแปลงจะมีผลทีละน้อยในเวอร์ชันต่างๆ แต่ทุกสิ่งทุกอย่างที่คุณต้องเตรียมและการทดสอบพร้อมแล้วในขณะนี้
รายละเอียดและไทม์ไลน์ทั้งหมดอยู่ในโพสต์ช่วงทดลองใช้จากต้นทางของการลด User Agent ใน developer.chrome.com
และอีกมากมาย
แน่นอน ยังมีคำถามอีกมากมาย
- หากคุณติดตาม Storage Foundation API มาก่อนหน้านี้ เรามีช่วงทดลองใช้ต้นทางสำหรับแฮนเดิลการเข้าถึงแบบใหม่
- ตอนนี้ WebAssembly มีการสนับสนุนด้านการจัดการข้อยกเว้น ซึ่งทำให้โค้ดเสียหายในขั้นตอนการควบคุมเมื่อมีการแสดงข้อผิดพลาด
- Chrome 100 จะพร้อมให้บริการในปีหน้า ซึ่งถึงเวลาแล้วที่จะตรวจสอบว่าโค้ดของคุณรองรับตัวเลขมากกว่า 2 หลักได้
อ่านเพิ่มเติม
ทั้งหมดนี้พูดถึงไฮไลต์สำคัญเพียงบางส่วน โปรดไปที่ลิงก์ด้านล่างสำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 95
- มีอะไรใหม่ใน Chrome DevTools (95)
- การเลิกใช้งานและการนำ Chrome 95 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 95
- มีอะไรใหม่ใน JavaScript ใน Chrome 95
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 96 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!