ฟีเจอร์ใหม่ใน Chrome 73

พีต เลอเพจ

ใน Chrome 73 เราได้เพิ่มการสนับสนุนสำหรับ

นอกจากนี้ยังมีอีกมากมาย

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

บันทึกการเปลี่ยนแปลง

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

Progressive Web App ทำงานได้ทุกที่

Progressive Web App ให้ประสบการณ์ที่เหมือนแอปซึ่งติดตั้งได้ ซึ่งสร้างขึ้นและส่งผ่านเว็บโดยตรง ใน Chrome 73 เราได้เพิ่มการรองรับ macOS เพื่อให้รองรับ Progressive Web App ไปยังแพลตฟอร์มเดสก์ท็อปทั้งหมด ทั้งสำหรับ Mac, Windows, ChromeOS และ Linux ตลอดจนอุปกรณ์เคลื่อนที่ ซึ่งทำให้การพัฒนาเว็บแอปทำได้ง่ายขึ้น

Progressive Web App ทำงานเร็วและเชื่อถือได้ จึงโหลดและทำงานด้วยความเร็วเดียวกันเสมอโดยไม่คำนึงถึงการเชื่อมต่อเครือข่าย ซึ่งมอบประสบการณ์ที่สมบูรณ์และน่าสนใจผ่านฟีเจอร์บนเว็บที่ทันสมัยซึ่งใช้ประโยชน์จากความสามารถของอุปกรณ์อย่างเต็มที่

ผู้ใช้จะติดตั้ง PWA จากเมนูตามบริบทของ Chrome ได้ หรือคุณจะโปรโมตประสบการณ์การติดตั้งโดยตรงด้วยเหตุการณ์ beforeinstallprompt ก็ได้ เมื่อติดตั้งแล้ว PWA จะผสานรวมกับระบบปฏิบัติการเพื่อให้ทำงานเหมือนกับแอปพลิเคชันดั้งเดิม นั่นคือผู้ใช้ค้นหาและเรียกใช้จากที่เดียวกับแอปอื่นๆ, เรียกใช้ในหน้าต่างของตัวเอง, ปรากฏในตัวสลับงาน ไอคอนสามารถแสดง การติดป้ายการแจ้งเตือน และอื่นๆ ได้

เราต้องการปิดช่องว่างด้านความสามารถระหว่างเว็บกับเนทีฟ เพื่อวางรากฐานที่มั่นคงสำหรับแอปพลิเคชันสมัยใหม่ที่ให้บริการบนเว็บ เรากำลังดำเนินการเพิ่มความสามารถของแพลตฟอร์มเว็บใหม่ที่ให้คุณเข้าถึงสิ่งต่างๆ เช่น ระบบไฟล์, Wake Lock, เพิ่ม ป้ายบรรยากาศในแถบที่อยู่ เพื่อแจ้งให้ผู้ใช้ทราบว่าติดตั้ง PWA ได้, ติดตั้งนโยบายสำหรับองค์กร และอีกมากมาย

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

  1. เพิ่มไฟล์ Manifest
  2. สร้างชุดไอคอน
  3. เพิ่มโปรแกรมทำงานของบริการแบบ Boilerplate

แล้วทำซ้ำจากตรงนั้น

Signed HTTP Exchange

Signed HTTP Exchange (SXG) ซึ่งเป็นส่วนหนึ่งของเทคโนโลยีใหม่ที่เรียกว่าแพ็กเกจเว็บ พร้อมให้บริการใน Chrome 73 แล้ว Signed HTTP Exchange ช่วยให้สามารถสร้างเนื้อหาที่ "พกพาได้" ที่บุคคลอื่นส่งได้ และนี่เป็นสิ่งที่สำคัญมาก เพราะยังคงไว้ซึ่งความถูกต้องและการระบุแหล่งที่มาของเว็บไซต์ต้นฉบับ

Signed Exchange: สาระสำคัญ

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

Signed HTTP Exchange ช่วยให้ผู้ใช้แสดงเนื้อหาได้เร็วขึ้น ทำให้ได้รับประโยชน์จาก CDN โดยไม่ต้องควบคุมคีย์ส่วนตัวของใบรับรอง ทีม AMP มีแผนที่จะใช้ HTTP Exchange แบบลงชื่อในหน้าผลการค้นหาของ Google เพื่อปรับปรุง URL ของ AMP และเร่งการคลิกผลการค้นหา

ดูวิธีการเริ่มต้นใช้งานได้จากโพสต์ Signed HTTP Exchange ของ Kinuko

สไตล์ชีตที่สร้างได้

สไตล์ชีตที่สร้างได้ใหม่ใน Chrome 73 มอบวิธีใหม่ในการสร้างและแจกจ่ายสไตล์ที่นำมาใช้ใหม่ได้ ซึ่งมีความสำคัญเป็นพิเศษเมื่อใช้ Shadow DOM

คุณสามารถสร้างสไตล์ชีตโดยใช้ JavaScript ได้เสมอ สร้างองค์ประกอบ <style> โดยใช้ document.createElement('style') จากนั้นเข้าถึงพร็อพเพอร์ตี้ของชีตเพื่อรับการอ้างอิงไปยังอินสแตนซ์ CSSStyleSheet ที่สำคัญ และตั้งค่าสไตล์

แผนภาพแสดงการจัดเตรียมและการใช้ CSS

การใช้วิธีนี้มีแนวโน้มที่จะทำให้สไตล์ชีตขยายตัว ที่แย่ไปกว่านั้นคือทำให้ เนื้อหาที่ไม่มีสไตล์หวือหวา สไตล์ชีตที่สร้างได้ทำให้สามารถกำหนดและเตรียมสไตล์ CSS ที่ใช้ร่วมกัน แล้วนำสไตล์เหล่านั้นไปใช้กับ Shadow Roots หรือเอกสารต่างๆ ได้อย่างง่ายดายและไม่มีการทำซ้ำ

การอัปเดต CSSStyleSheet ที่แชร์จะมีผลกับรูททั้งหมดที่มีการใช้งาน และการใช้งานสไตล์ชีตจะดำเนินการอย่างรวดเร็วและพร้อมกันเมื่อโหลดชีตแล้ว

เริ่มต้นใช้งานได้ง่ายๆ โดยสร้างอินสแตนซ์ใหม่ของ CSSStyleSheet จากนั้นใช้ replace หรือ replaceSync เพื่ออัปเดตกฎของสไตล์ชีต

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

ลองดูโพสต์สไตล์ชีตที่สร้างได้: สไตล์ที่นำกลับมาใช้ใหม่ได้อย่างราบรื่นของ Jason Miller เพื่อดูรายละเอียดเพิ่มเติมและตัวอย่างโค้ด

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

ทั้งหมดนี้เป็นการเปลี่ยนแปลงเพียงบางส่วนใน Chrome 73 สำหรับนักพัฒนาซอฟต์แวร์ และแน่นอนว่ายังมีสิ่งใหม่ๆ อีกมาก

  • matchAll() เป็นวิธีการจับคู่นิพจน์ทั่วไปแบบใหม่ในต้นแบบสตริง แล้วแสดงผลอาร์เรย์ที่มีผลลัพธ์ที่ตรงกันทั้งหมด
  • ตอนนี้องค์ประกอบ <link> รองรับพร็อพเพอร์ตี้ imagesrcset และ imagesizes เพื่อให้สอดคล้องกับแอตทริบิวต์ srcset และ sizes ของ HTMLImageElement แล้ว
  • การใช้รัศมีการเบลอของเงาใน Blink ตรงกับ Firefox และ Safari แล้ว
  • Mac รองรับโหมดมืดสำหรับ UI ของ Chrome แล้ว และการรองรับ Windows จะพร้อมใช้งานเร็วๆ นี้ นอกจากนี้ยังมีการแก้ไขคิวรี่สื่อ CSS ดังนี้ prefers-color-scheme ซึ่งใช้ในการตรวจหาว่าผู้ใช้ได้ขอให้ระบบใช้ธีมสีอ่อนหรือมืด ข้อบกพร่องในการติดตามนี้คือ เพิ่มการรองรับฟีเจอร์สื่อ CSS prefers-color-scheme สำหรับ Chrome และ Firefox

ติดตาม

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

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