ใหม่ใน Chrome 95

Pete LePage

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

  • การกำหนดเส้นทางจะง่ายขึ้นด้วยการใส่ 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

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

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

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

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

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

โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

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