ใหม่ใน 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 นําการกำหนดเส้นทางมาสู่แพลตฟอร์มเว็บ

การเลือกสีด้วย Eye Dropper 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 นี้จะทํางานแบบไม่สอดคล้องกันเพื่อไม่ให้บล็อกเธรดหลัก เมื่อผู้ใช้คลิกสีที่ต้องการ ระบบจะแสดงผลด้วยสีที่ผู้ใช้คลิก

คุณสามารถลองการสาธิตสั้นๆ และดูโค้ดใน Glitch

การประชุมสุดยอด PWA

คุณเข้าร่วม PWA Summit เมื่อต้นเดือนนี้ไหม

เราดีใจที่ได้เห็นว่าผู้คนจำนวนมากพูดถึง 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 แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

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