ทีม Web Dev Ecosystem - สรุปผลเดือนกุมภาพันธ์

Mariko Kosaka
ขอต้อนรับสู่ตอนแรกของสรุปรายเดือน ซึ่งเรากำลังจะย้อนกลับไปดูสิ่งที่เกิดขึ้นในทีมระบบนิเวศของนักพัฒนาเว็บ✨

เราเป็นทีมวิศวกรและนักสื่อสารที่ผลิตบทความและตัวอย่างโค้ด อย่างเช่นหลักพื้นฐานในเว็บของเว็บไซต์นี้ และพอร์ทัลใหม่เอี่ยมอย่าง web.dev นอกจากนี้ คุณยังติดตามผลงานของเราได้ในช่อง YouTube และอย่าลืมติดตามเราที่ @ChromiumDev :)

เดือนกุมภาพันธ์เป็นเดือนที่สั้นแต่เรามีคอนเทนต์ไม่มากนัก มาเริ่มกันด้วยผลงาน ขนาดใหญ่ที่ทีมวางไว้

ผลงาน

Workbox

ข่าวด่วน ได้มีการเปิดตัว Workspace 4.0 เมื่อไม่กี่วันก่อน 🎉 รุ่นนี้มีฟีเจอร์ใหม่ๆ ที่ยอดเยี่ยม เช่น workbox-window และการปรับปรุงแพ็กเกจ Workbox จำนวนมากที่มีอยู่แล้ว สำหรับผู้ที่ใช้ Workbox อยู่แล้ว โปรดดูคำแนะนำในการย้ายข้อมูล v3 ไปยัง v4 หากอยากทราบวิธีใช้ Workbox ในโปรเจ็กต์ที่มีอยู่ ต่อไปนี้เป็นคู่มือในการ ใช้กับ Bundler ที่คุณเลือก หากไม่แน่ใจว่าแถบงานของปัญหาใดสามารถช่วยแก้ไขได้ ดูบทสัมภาษณ์เกี่ยวกับ Service Worker ในรายการ State of the Web

lit-html และ LitElement

ทีมในโปรเจ็กต์ Polymer ทำงานกันอย่างเต็มที่สำหรับการเปิดตัว lit-html และ LitElement อย่างเสถียร ซึ่งเป็นไลบรารีการพัฒนาเว็บรุ่นถัดไป 2 ไลบรารี หากอยากลองใช้งาน ก็เริ่มจาก คำแนะนำลองใช้ LitElement 🎁

กิจกรรมบนเว็บที่เชื่อถือได้

การเปิดตัว Chrome 72 ที่ผ่านมา กิจกรรมบนเว็บที่เชื่อถือได้ (TWA) ได้เข้าสู่ตลาดแล้ว! TWA ให้คุณใช้ Chrome แบบเต็มหน้าจอภายในกิจกรรม Android ได้ ซึ่งหมายความว่าคุณสามารถนำเนื้อหาเว็บไปใส่ในกลมแอป ป้องกันไม่ให้มีการเข้าดู คู่มือเริ่มต้นใช้งานนี้หรืออ่านวิธีที่ @svenbudak ใส่ PWA ใน Google Play Store ได้

สิ่งที่จะเกิดขึ้นต่อไป

ด้วยการเปิดตัว Chrome 73 เวอร์ชันเสถียรที่กำลังจะเปิดตัว (12 มีนาคม) เราจึงมีฟีเจอร์ที่น่าสนใจอีกมากมายให้พูดถึง!

V8 - เครื่องมือ JavaScript ของ Chrome มีการอัปเดตหลายรายการ รวมถึง Object.fromEntries และ String.prototype.matchAll ดูบันทึกประจํารุ่น v8

กำลังทำงานกับเสียงและวิดีโอบนเว็บใช่ไหม การสนับสนุนคีย์สื่อฮาร์ดแวร์พร้อมใช้งานแล้ว และ "ข้ามโฆษณา" ในหน้าต่างการแสดงภาพซ้อนภาพก็กำลังอยู่ในช่วงทดลองใช้จากต้นทาง ดูข้อมูลเพิ่มเติมได้ที่การอัปเดตเสียง/วิดีโอใน Chrome 73

เมื่อพูดถึงช่วงทดลองใช้จากต้นทาง เตรียมพร้อมสำหรับลำดับความสำคัญในการดึงข้อมูล ลำดับความสำคัญของการดึงข้อมูล นักพัฒนาแอปสามารถตั้งค่าความสำคัญขององค์ประกอบ <script>, <img> หรือ <link> เพื่อกำหนดวิธีการโหลดให้แก่เบราว์เซอร์ นี่ยังเป็นฟีเจอร์ทดลอง ดังนั้นโปรดลองใช้และ ส่งความคิดเห็น

ประสิทธิภาพในการแสดงผลเป็นสิ่งที่เราให้ความสำคัญเสมอ ใน Listener ของ Chrome 73 wheel และ mousewheel ที่ลงทะเบียนในเป้าหมายรูท (หน้าต่าง เอกสาร หรือเนื้อความ) จะเป็นListener แบบแพสซีฟโดยค่าเริ่มต้น ซึ่งทำให้การเลื่อนล้อเลื่อนโดยค่าเริ่มต้นเป็นไปอย่างรวดเร็ว

หลังจากเปิดตัวฟีเจอร์ใหม่แล้ว เราก็ต้องบอกลาฟีเจอร์ใหม่ ดังนั้นอย่าลืมตรวจสอบการเลิกใช้งานและการนำออกสำหรับ Chrome 73 ด้วย

การพัฒนาใหม่

ต่อไปนี้คือสิ่งที่เรากำลังพัฒนาซึ่งจะเข้าสู่เบราว์เซอร์ใกล้คุณ

เพื่อช่วยป้องกัน Cross-Site Scripting เรากำลังพัฒนา API ใหม่ที่ชื่อว่า Trusted Types การเลือกใช้ประเภทที่เชื่อถือได้ (ผ่านนโยบายรักษาความปลอดภัยเนื้อหา) จะล็อกเอกสารจากการแทรก DOM เรากำลังพยายามให้ตัวอย่างโค้ดและคำแนะนำเพิ่มเติมเกี่ยวกับเรื่องนี้ แต่ในระหว่างนี้โปรดอ่านเพิ่มเติมเกี่ยวกับ Trusted Types เพื่อลองใช้งาน

การกดปุ่มย้อนกลับและไปข้างหน้าใน Chrome อาจเร็วมาก! เรากำลังสำรวจฟีเจอร์ Back-Forward Cache ใหม่เพื่อแคชหน้าในหน่วยความจำเมื่อผู้ใช้ออกจากหน้าไป ลองดูคำอธิบายและต้นแบบของ bfcache ในโพสต์นี้

สุดท้าย Intersection Observer v2 แนะนําแนวคิดในการติดตาม "ระดับการเข้าถึง" จริงของเป้าหมาย

สิ่งที่เรากำลังนำมาแก้ไข

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

วิดีโอและพอดแคสต์ใหม่

มาร์ตินกำลังเริ่มซีรีส์ใหม่ชื่อ JavaScript SEO โดยตอนแรกจะเกี่ยวกับวิธีที่ Google Search จัดทำดัชนีเว็บไซต์ JavaScript เมื่อเร็วๆ นี้ Meggin นำเสนอการทบทวนเกี่ยวกับโปรเจ็กต์ web.dev ในงานพบปะ Jake และ Surma กลับมาแล้วพร้อมกับตอนใหม่ของพอดแคสต์ HTTP203 ที่พูดถึงการทดลองการหมุนเวียนรูปภาพ

นอกจากนี้ เรายังมีการแสดงรายการทั่วไป เช่น "ใหม่ใน Chrome", "มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ" และ "สถานะของเว็บ"" ในช่อง YouTube ของเรา

กล่าวถึงพิเศษ

คุณได้ดูตัวอย่างหุ่นเชิดแล้วหรือยัง คุณอาจเคยเห็นจากทวีตของ Eric Bidelman ที่ชื่อ "📯The 12 Days of Puppeteer 🤹🏻 ♂️🎁" ในปีที่แล้ว โดยเป็นคอลเล็กชันตัวอย่างโค้ด Puppeteer ที่ดีเยี่ยมซึ่งช่วยให้คุณคิดอย่างสร้างสรรค์เกี่ยวกับสิ่งที่คุณสามารถทำได้ด้วยเบราว์เซอร์ คุณควรเข้าไปดู

(ขอให้ความพยายามใหม่ของคุณนะ Eric! เราจะคิดถึงคุณนะ!!)

ใกล้จะเสร็จแล้ว

คุณคิดอย่างไรกับสรุปรายเดือนครั้งแรก หากชอบหรือมีไอเดียที่จะปรับปรุง โปรดแจ้งให้เราทราบทาง Twitter @kosamari

หากคุณสร้างอะไรใหม่ๆ โดยใช้ฟีเจอร์ที่พูดถึงที่นี่ หรือเปลี่ยนแปลงบางอย่างในฐานของโค้ดโดยอิงตามบทความของเรา โปรดแจ้งให้เราทราบที่ @ChromiumDev

ในเดือนมีนาคม พวกเราบางส่วนจะเดินทางไปยังอินเดียและหวังว่าจะได้ข้อมูลเพิ่มเติมเกี่ยวกับประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่ที่แพลตฟอร์มนี้ ✈️ หวังว่าจะได้แชร์สิ่งที่ได้เรียนรู้จากที่นั่นกัน!

แล้วพบกันใหม่เดือนหน้า👋