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

Pete LePage

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

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

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

  1. เพิ่มไฟล์ Manifest
  2. สร้างชุดไอคอน
  3. เพิ่ม Service Worker ที่ใช้กันโดยทั่วไป

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

Signed HTTP Exchange

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

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

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

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

โปรดดูรายละเอียดเกี่ยวกับวิธีเริ่มต้นใช้งานในโพสต์Signed HTTP Exchange ของ Kinuko

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

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

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

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

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

การอัปเดต CSSStyleSheet ที่แชร์จะมีผลกับรูททั้งหมดที่ใช้ 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 แล้ว
  • ตอนนี้โหมดมืดสำหรับ UI ของ Chrome พร้อมให้ใช้งานใน Mac แล้ว และกำลังจะมีให้ใช้งานใน Windows นอกจากนี้ เรายังดำเนินการกับคำค้นหาสื่อ CSS prefers-color-scheme ซึ่งสามารถใช้เพื่อตรวจจับว่าผู้ใช้ได้ขอให้ระบบใช้ธีมสีสว่างหรือสีเข้มหรือไม่ ข้อบกพร่องการติดตามสําหรับกรณีนี้คือ เพิ่มการรองรับฟีเจอร์สื่อ CSS prefers-color-scheme สําหรับ Chrome และ Firefox

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

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

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