ใหม่ใน Chrome 103

Pete LePage

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

• มีรหัสสถานะ HTTP 103 ใหม่ที่ช่วยเบราว์เซอร์ตัดสินใจว่าควรโหลดเนื้อหาใดล่วงหน้าก่อนที่หน้าเว็บจะเริ่มแสดง
• Local Font Access API ช่วยให้เว็บแอปพลิเคชันสามารถแสดงรายการและใช้แบบอักษรที่ติดตั้งในคอมพิวเตอร์ของผู้ใช้
• AbortSignal.timeout() เป็นวิธีที่ง่ายกว่าในการใช้การกำหนดเวลาหมดอายุใน API แบบไม่พร้อมกัน
• และยังมีอีกมากมาย

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 103 กัน

รหัสสถานะ HTTP 103 - คำแนะนำเบื้องต้น

วิธีหนึ่งในการปรับปรุงประสิทธิภาพหน้าเว็บคือการใช้คำแนะนำทรัพยากร ซึ่งจะให้ "คำแนะนำ" แก่เบราว์เซอร์เกี่ยวกับสิ่งที่อาจต้องใช้ในภายหลัง เช่น การโหลดไฟล์ล่วงหน้าหรือการเชื่อมต่อกับเซิร์ฟเวอร์อื่น

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

แต่เบราว์เซอร์จะดำเนินการกับคำแนะนำเหล่านั้นไม่ได้จนกว่าเซิร์ฟเวอร์จะส่งอย่างน้อยส่วนหนึ่งของหน้า

สมมติว่าเบราว์เซอร์ขอหน้าเว็บ แต่เซิร์ฟเวอร์ต้องใช้เวลา 2-3 ร้อยมิลลิวินาทีในการสร้างหน้าเว็บ แต่จะรอจนกว่าเบราว์เซอร์จะเริ่มรับหน้าเว็บ แต่หากเซิร์ฟเวอร์ทราบว่าหน้าเว็บจะต้องใช้ชุดทรัพยากรย่อยชุดหนึ่งเสมอ เช่น ไฟล์ CSS, JavaScript บางส่วน และรูปภาพ 2-3 รูป ก็จะตอบกลับด้วยรหัสสถานะ HTTP 103 ใหม่สำหรับคำใบ้ล่วงหน้าได้ทันที และขอให้เบราว์เซอร์โหลดทรัพยากรย่อยเหล่านั้นล่วงหน้า

จากนั้นเมื่อเซิร์ฟเวอร์สร้างหน้าเว็บแล้ว ก็จะส่งหน้าเว็บดังกล่าวได้ด้วยการตอบกลับ HTTP 200 ตามปกติ เมื่อหน้าเว็บปรากฏขึ้นแล้วเบราว์เซอร์ก็เริ่มโหลดทรัพยากรที่จําเป็นแล้ว

เนื่องจากเป็นรหัสสถานะ HTTP ใหม่ คุณจึงต้องอัปเดตเซิร์ฟเวอร์เพื่อใช้รหัสนี้

เริ่มต้นใช้งาน HTTP 103 คำแนะนำเบื้องต้นมีดังนี้

• คำอธิบายคำแนะนำเบื้องต้น
• การกําหนดค่า Apache 2 Early Hints
• การใช้ Early Hints ใน Cloudflare
• Fastly Beyond Server Push: รหัสสถานะ 103 Early Hints

Local Font Access API

แบบอักษรบนเว็บเป็นปัญหามาโดยตลอด และยิ่งเป็นปัญหาสำหรับแอปที่อนุญาตให้ผู้ใช้สร้างกราฟิกและการออกแบบของตนเอง ที่ผ่านมาเว็บแอปใช้ได้เฉพาะแบบอักษรเว็บเท่านั้น ไม่สามารถดูรายการแบบอักษรที่ผู้ใช้ติดตั้งไว้ในคอมพิวเตอร์ และไม่มีวิธีเข้าถึงข้อมูลตารางแบบอักษรแบบเต็ม ซึ่งสำคัญมากหากคุณต้องการใช้กองข้อความที่กำหนดเอง

Local Font Access API ใหม่ช่วยให้เว็บแอปพลิเคชันสามารถแจกแจงแบบอักษรในเครื่องของผู้ใช้ และให้การเข้าถึงข้อมูลตารางแบบอักษร

หากต้องการดูรายการแบบอักษรที่ติดตั้งในอุปกรณ์ คุณจะต้องขอสิทธิ์ก่อน

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

จากนั้นโทรหา window.queryLocalFonts() โดยจะแสดงผลอาร์เรย์ของแบบอักษรทั้งหมดที่ติดตั้งในอุปกรณ์ของผู้ใช้

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

หากสนใจเฉพาะแบบอักษรบางชุด คุณสามารถกรองแบบอักษรเหล่านั้นได้โดยเพิ่มพารามิเตอร์ postscriptNames

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

อ่านรายละเอียดทั้งหมดได้ในบทความของ Tom เรื่องใช้แบบอักษรขั้นสูงกับแบบอักษรในเครื่องบน web.dev

ระยะหมดเวลาที่ง่ายขึ้นด้วย AbortSignal.timeout()

ใน JavaScript จะใช้ AbortController และ AbortSignal เพื่อยกเลิกการเรียกใช้แบบไม่สอดคล้อง

ตัวอย่างเช่น เมื่อส่งคําขอ fetch() คุณสามารถสร้าง AbortSignal แล้วส่งไปยัง fetch() หากต้องการยกเลิก fetch() ก่อนที่ fetch() จะแสดง ให้เรียกใช้ abort() ในอินสแตนซ์ของ AbortSignal ก่อนหน้านี้ หากต้องการให้ยกเลิกหลังจากผ่านไประยะเวลาหนึ่ง คุณจะต้องใส่ไว้ใน setTimeout()

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

โชคดีที่ตอนนี้การดำเนินการดังกล่าวง่ายขึ้นด้วยtimeout()เมธอดแบบคงที่ใหม่ใน AbortSignal โดยจะแสดงผลออบเจ็กต์ AbortSignal ที่ถูกยกเลิกโดยอัตโนมัติหลังจากผ่านไปตามจำนวนมิลลิวินาทีที่ระบุ โค้ดที่เคยมีแค่ไม่กี่บรรทัด ตอนนี้เหลือเพียงบรรทัดเดียว

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() รองรับใน Chrome 103 และรองรับใน Firefox และ Safari อยู่แล้ว

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

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

• ตอนนี้คุณสามารถแชร์ไฟล์รูปภาพรูปแบบ avif โดยใช้การแชร์ทางเว็บได้แล้ว
• ตอนนี้ Chromium จะจับคู่กับ Firefox ด้วยการเรียกใช้ popstate ทันทีหลังจาก URL เปลี่ยนแปลง ตอนนี้ลําดับของเหตุการณ์คือ popstate ตามด้วย hashchange บนทั้ง 2 แพลตฟอร์ม
• และ Element.isVisible() จะบอกให้ทราบว่าองค์ประกอบนั้นมองเห็นได้หรือไม่

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

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

• มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (103)
• การเลิกใช้งานและการนำออกใน Chrome 103
• การอัปเดต ChromeStatus.com สำหรับ Chrome 103
• รายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium
• ปฏิทินการเผยแพร่ของ Chrome

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

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

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