ใหม่ใน Chrome 96

Pete LePage

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

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

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

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

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

การเพิ่มพร็อพเพอร์ตี้ id ลงในไฟล์ Manifest จะเป็นการนำทรัพยากร Dependency ของ 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 ได้ จากนั้นเมื่อผู้ใช้คลิกลิงก์ที่มีคำนำหน้า 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"
    }
  ]
}

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

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

เมื่อเบราว์เซอร์แยกวิเคราะห์หน้าเว็บและเริ่มค้นพบและดาวน์โหลดทรัพยากร เช่น รูปภาพ สคริปต์ หรือ 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 วินาที

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

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

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

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

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

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

การประชุมสุดยอด Chrome Dev

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

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

แน่นอน ยังมีคำถามอีกมากมาย

  • Back, Forward Cache หรือ bfcache พร้อมใช้งานแล้วในรุ่นเสถียรและทำให้ Chrome สอดคล้องกับทั้ง Firefox และ Safari

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

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

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

โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 97 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!