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

ลองดูบทความของ Jeff ที่ URLPattern นำเส้นทางไปยังแพลตฟอร์มเว็บ เพื่อดูรายละเอียดทั้งหมด

การเลือกสีด้วย Eye Dropper API

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

API หลอดดูดสีที่พนักงานใน Microsoft นำมาใช้ ฟังก์ชันการทำงานดังกล่าวไปยังเว็บ หากต้องการใช้ ให้สร้าง EyeDropper() ใหม่ แล้วเรียก open() ในนั้น

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

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

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