ใหม่ใน 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 คำแนะนำเบื้องต้นมีดังนี้

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);

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

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

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

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