ใหม่ใน Chrome 96

Pete LePage

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

ผมชื่อ Pete LePage ในที่สุดก็ได้ถ่ายทำในสตูดิโอแล้ว มาเริ่มดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 96

ไฟล์ Manifest id สำหรับ PWA

เมื่อผู้ใช้ติดตั้ง PWA เบราว์เซอร์ต้องมีวิธีระบุ PWA นั้นโดยไม่ซ้ำกัน แต่จนกระทั่งเมื่อไม่นานมานี้ ข้อมูลจำเพาะของไฟล์ Manifest ของเว็บแอปไม่ได้ระบุวิธีระบุ PWA ทำให้เบราว์เซอร์ต้องเป็นผู้ตัดสินใจและนำไปสู่การนำไปใช้งานที่แตกต่างกัน ในบางเบราว์เซอร์จะใช้ start_url ส่วนในเบราว์เซอร์อื่นๆ จะใช้เส้นทางไปยังไฟล์ Manifest

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

การเพิ่มพร็อพเพอร์ตี้ id ลงในไฟล์ Manifest จะทำให้ไม่ต้องใช้ start_url หรือตำแหน่งของไฟล์ Manifest และทำให้อัปเดตช่องเหล่านั้นได้

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

การสนับสนุนพร็อพเพอร์ตี้ id จะพร้อมใช้งานในเบราว์เซอร์ที่พัฒนาบน Chromium บนเดสก์ท็อปตั้งแต่ Chrome เวอร์ชัน 96 เป็นต้นไป การรองรับอุปกรณ์เคลื่อนที่ซึ่งปัจจุบันใช้ URL ของไฟล์ Manifest เป็นรหัสที่ไม่ซ้ำกันควรพร้อมใช้งานในช่วงครึ่งแรกของปี 2022

เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์แสดงรหัสแอปที่คำนวณแล้ว

หากมี PWA อยู่ในเวอร์ชันที่ใช้งานจริงอยู่แล้วและต้องการเพิ่ม id ลงในไฟล์ Manifest คุณต้องใช้รหัสที่เบราว์เซอร์กำหนด คุณจะเห็น id ในแผง Manifest ของแผงแอปพลิเคชันในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์

สําหรับ PWA ใหม่ คุณตั้งค่า id เป็นสตริงค่าใดก็ได้ตามต้องการ แต่โปรดทราบว่าคุณจะเปลี่ยนแปลงค่านี้ไม่ได้ในอนาคต ดังนั้นโปรดเลือกอย่างรอบคอบ

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

ดูข้อมูลเพิ่มเติมได้ที่การระบุ PWA ที่ไม่ซ้ำกันด้วยพร็อพเพอร์ตี้รหัสไฟล์ Manifest ของเว็บแอป

ตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA

เว็บแอปสามารถใช้ navigator.registerProtocolHandler() เพื่อลงทะเบียนเป็นตัวแฮนเดิลโปรโตคอล เช่น Gmail สามารถจดทะเบียนmailto Protocol ได้ จากนั้นเมื่อผู้ใช้คลิกลิงก์ที่มีคำนำหน้า mailto: ระบบจะเปิด Gmail ซึ่งช่วยให้ผู้ใช้ส่งอีเมลได้อย่างง่ายดาย

ตั้งแต่ Chrome 96 เป็นต้นไป PWA จะลงทะเบียนเป็นตัวแฮนเดิลโปรโตคอลได้เป็นส่วนหนึ่งของการติดตั้ง หากต้องการดำเนินการดังกล่าวใน PWA ให้เพิ่มพร็อพเพอร์ตี้ protocol_handlers ลงในไฟล์ Manifest ของเว็บแอป ระบุ protocol ที่ต้องการจัดการ และ url ที่ควรเปิดขึ้นเมื่อมีการคลิก

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

การดำเนินการนี้มีข้อจำกัดบางอย่าง และคุณไม่สามารถลงทะเบียนโปรโตคอลใดก็ได้ ดังนั้นโปรดดูรายละเอียดทั้งหมดและวิธีใช้ไวยากรณ์ web+ เพื่อสร้างโปรโตคอลของคุณเองในการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA

คำแนะนำเกี่ยวกับลําดับความสําคัญ (ช่วงทดลองใช้จากต้นทาง)

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

คำแนะนำลําดับความสําคัญเป็นฟีเจอร์ทดลองที่มีให้ใช้งานในช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 96 เป็นต้นไป และช่วยเพิ่มประสิทธิภาพ Core Web Vitals ได้ แอตทริบิวต์ importance ช่วยให้คุณระบุลําดับความสําคัญสําหรับประเภททรัพยากร เช่น CSS, แบบอักษร, สคริปต์, รูปภาพ และ iframe

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

เช่น หน้า Google Flights รูปภาพพื้นหลังดังกล่าวคือ Largest Contentful Paint (LCP)

ภาพหน้าจอของ Google Flights ที่มีรูปพื้นหลังขนาดใหญ่

มาดูกันว่าการโหลดมีและไม่มีคำแนะนำเกี่ยวกับลําดับความสําคัญเป็นอย่างไร เมื่อตั้งค่าลําดับความสําคัญเป็น high ในรูปภาพพื้นหลัง LCP จะลดลงจาก 2.6 วินาทีเป็น 1.9 วินาที

ดูรายละเอียดทั้งหมดเกี่ยวกับการเพิ่มประสิทธิภาพการโหลดทรัพยากรด้วย Fetch Priority API รวมถึงวิธีลงทะเบียนทดลองใช้ต้นทางและตัวอย่างที่ยอดเยี่ยมเกี่ยวกับวิธีที่ Fetch Priority API ช่วยปรับปรุงประสิทธิภาพการแสดงผล

จำลอง Chrome 100 ในสตริง UA

ในช่วงต้นปีหน้า เราจะเปิดตัว Chrome เวอร์ชัน 100 ซึ่งเป็นเวอร์ชันที่มีตัวเลข3 หลัก คุณควรตรวจสอบโค้ดที่ตรวจสอบหมายเลขเวอร์ชันหรือแยกวิเคราะห์สตริง UA เพื่อให้แน่ใจว่ารองรับตัวเลข 3 หลัก

ตั้งแต่ Chrome 96 เป็นต้นไป จะมี Flag ใหม่ #force-major-version-to-100 ที่จะเปลี่ยนหมายเลขเวอร์ชันปัจจุบันเป็น 100 เพื่อให้คุณตรวจสอบได้ว่าทุกอย่างทำงานได้ตามที่คาดไว้

หน้า Flag ของ Chrome ที่ไฮไลต์ตัวเลือก #force-major-version-to-100 ใหม่

โปรดดูรายละเอียดที่หัวข้อบังคับให้ Chrome เป็นเวอร์ชันหลัก 100 ในสตริง User Agent

Chrome Dev Summit

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

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

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

  • ตอนนี้ปุ่มย้อนกลับและไปข้างหน้า หรือ bfcache พร้อมใช้งานในเวอร์ชันเสถียรแล้ว ซึ่งจะช่วยให้ Chrome ทำงานได้เหมือนกับทั้ง Firefox และ Safari

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

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

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

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

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