ใหม่ใน 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 Summit

คุณเข้าร่วม 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 เปิดตัว