ใหม่ใน Chrome 95

Pete LePage

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

  • การกำหนดเส้นทางจะง่ายขึ้นด้วย URLPattern ที่ฝังอยู่ในเบราว์เซอร์
  • Eye Dropper API มีเครื่องมือในตัวสำหรับเลือกสี
  • ตอนนี้เรามีช่วงทดลองใช้ใหม่ที่ให้คุณเลือกรับสตริง UA ที่ลดลงได้แล้ว
  • วิดีโอจาก PWA Summit ทั้งหมดอยู่บนอินเทอร์เน็ต
  • และยังมีอีกมากมาย

ผม 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 ขึ้นไป และสำหรับเบราว์เซอร์หรือสภาพแวดล้อมอย่าง Node ที่ยังไม่รองรับ คุณสามารถใช้ไลบรารี urlpattern-polyfill ได้

ดูรายละเอียดทั้งหมดได้ในบทความของ Jeff เรื่อง URLPattern brings routing to the web platform

การเลือกสีด้วย API หลอดดูดสี

แอปออกแบบเกือบทุกแอปที่ฉันเคยใช้มีเครื่องมือหลอดดูดสี ซึ่งช่วยให้ทราบได้ง่ายว่าสิ่งใดมีสีอะไร เบราว์เซอร์บางตัวมีฟีเจอร์หลอดดูดสีในตัว <input type=color> แต่ก็ไม่ใช่ตัวเลือกที่ดีที่สุด

Eye Dropper API ซึ่งได้รับการติดตั้งใช้งานโดยทีมงานบางส่วนที่ Microsoft จะนำฟังก์ชันการทำงานดังกล่าวมาสู่เว็บ หากต้องการใช้ ให้สร้างEyeDropper() อินสแตนซ์ใหม่ แล้วเรียกใช้ open() ในอินสแตนซ์นั้น

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

เช่นเดียวกับ Web API สมัยใหม่อื่นๆ อีกมากมาย API นี้ทำงานแบบไม่พร้อมกันเพื่อไม่ให้บล็อกเทรดหลัก เมื่อผู้ใช้คลิกสีที่ต้องการ ระบบจะแสดงสีที่ผู้ใช้คลิก

PWA Summit

คุณได้ดู PWA Summit เมื่อต้นเดือนนี้ไหม

เราดีใจที่ได้เห็นผู้คนมากมายพูดถึง PWA และแชร์ประสบการณ์ของตน หากพลาดชมไป วิดีโอทั้งหมดพร้อมให้รับชมแล้ว อย่าลืมไปดูที่ PWASummit.org หรือช่อง YouTube ของ PWA Summit

ช่วงทดลองใช้จากต้นทางสำหรับการลด User Agent

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

ตั้งแต่ Chrome 95 เป็นต้นไป จะมีช่วงทดลองใช้จากต้นทางใหม่ที่ ให้คุณเลือกรับสตริง UA ที่ลดลงได้แล้วตอนนี้ ซึ่งจะช่วยให้คุณค้นพบและแก้ไขปัญหาได้ก่อนที่ UA ที่ลดลงจะกลายเป็นลักษณะการทำงานเริ่มต้นใน Chrome

การเปลี่ยนแปลงจะค่อยๆ มีผลในการเปิดตัวหลายครั้ง แต่ ทุกสิ่งที่คุณต้องเตรียมและทดสอบพร้อมใช้งานแล้วในตอนนี้

รายละเอียดและไทม์ไลน์ทั้งหมดอยู่ในโพสต์การทดลองใช้ Origin สำหรับการลด User Agent ใน developer.chrome.com

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

แน่นอนว่ายังมีอีกมากมาย

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

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

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

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

ผม Pete LePage และทันทีที่ Chrome 96 เปิดตัว ผมจะมาที่นี่เพื่อบอกคุณว่ามีอะไรใหม่ใน Chrome บ้าง