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

พีต เลอเพจ

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

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

ปุ่มติดตั้งแถบอเนกประสงค์ PWA

ใน Chrome 76 เราช่วยให้ผู้ใช้ติดตั้ง Progressive Web App บนเดสก์ท็อปได้ง่ายขึ้น โดยเพิ่มปุ่มติดตั้งในแถบที่อยู่ที่บางครั้งเรียกว่าแถบอเนกประสงค์

หากเว็บไซต์เป็นไปตามเกณฑ์ความสามารถในการติดตั้ง Progressive Web App Chrome จะแสดงปุ่มติดตั้งในแถบอเนกประสงค์เพื่อให้ผู้ใช้ทราบว่าติดตั้ง PWA ได้ หากผู้ใช้คลิกปุ่มติดตั้ง ก็เหมือนกับการเรียก prompt() ในเหตุการณ์ beforeinstallprompt ซึ่งจะแสดงกล่องโต้ตอบการติดตั้งเพื่อให้ผู้ใช้ติดตั้ง PWA ได้ง่าย

ดูรายละเอียดทั้งหมดได้ที่ติดตั้งแถบที่อยู่สำหรับ Progressive Web App บนเดสก์ท็อป


ควบคุมแถบข้อมูลขนาดเล็กของ PWA ได้มากขึ้น

ตัวอย่างแถบข้อมูลขนาดเล็ก "เพิ่มลงในหน้าจอหลัก" สำหรับ AirHorner

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

ตั้งแต่ Chrome 76 เป็นต้นไป การเรียกใช้ preventDefault() ในเหตุการณ์ beforeinstallprompt จะหยุดแถบข้อมูลขนาดเล็กไม่ให้แสดง

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

โปรดอัปเดต UI เพื่อแจ้งให้ผู้ใช้ทราบว่าติดตั้ง PWA ได้ ดูรูปแบบสำหรับการโปรโมตการติดตั้ง PWA เพื่อดูแนวทางปฏิบัติแนะนำในการโปรโมตการติดตั้ง Progressive Web App

การอัปเดต WebAPK ที่เร็วขึ้น

เมื่อติดตั้ง Progressive Web App ใน Android แล้ว Chrome จะส่งคำขอและติดตั้ง Web APK โดยอัตโนมัติ หลังจากติดตั้งแล้ว Chrome จะตรวจสอบว่าไฟล์ Manifest ของเว็บแอปมีการเปลี่ยนแปลงเป็นระยะๆ หรือไม่ คุณอาจอัปเดตไอคอน สี หรือเปลี่ยนชื่อแอปแล้วเพื่อดูว่าจำเป็นต้องใช้ WebAPK ใหม่หรือไม่

ตั้งแต่ Chrome 76 เป็นต้นไป Chrome จะตรวจสอบไฟล์ Manifest บ่อยขึ้น โดยตรวจสอบทุกวันแทนที่จะตรวจสอบทุก 3 วัน หากพร็อพเพอร์ตี้หลักมีการเปลี่ยนแปลง Chrome จะขอและติดตั้ง WebAPK ใหม่เพื่อให้แน่ใจว่าชื่อ ไอคอน และพร็อพเพอร์ตี้อื่นๆ เป็นเวอร์ชันล่าสุด

ดูการอัปเดต WebAPK ให้บ่อยขึ้นเพื่อดูรายละเอียดทั้งหมด

โหมดเข้ม

ตอนนี้ระบบปฏิบัติการจำนวนมากรองรับโหมดมืดหรือธีมมืด

คิวรี่สื่อ prefers-color-scheme ช่วยให้คุณสามารถปรับรูปลักษณ์ของเว็บไซต์ให้เหมาะกับโหมดที่ผู้ใช้ต้องการ

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom มีบทความดีๆ เรื่อง สวัสดีความมืด เพื่อนเก่าของฉัน ใน web.dev ซึ่งรวบรวมทุกอย่างที่คุณจำเป็นต้องทราบ รวมถึงเคล็ดลับในการออกแบบสไตล์ชีตเพื่อรองรับทั้งโหมดสว่างและโหมดมืด

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

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

Promise.allSettled()

โดยส่วนตัวแล้วฉันตื่นเต้นกับ Promise.allSettled() มาก คล้ายกับ Promise.all() เพียงแต่ว่ารอจนกว่าคำสัญญาทั้งหมดจะได้รับการแก้ไขแล้วจึงค่อยกลับมา

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

อ่าน Blob ได้ง่ายขึ้น

Blob อ่านง่ายขึ้นด้วย 3 วิธีใหม่ ได้แก่ text(), arrayBuffer() และ stream() ทำให้ไม่ต้องสร้าง Wrapper ในโปรแกรมอ่านไฟล์อีกต่อไป

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

การรองรับรูปภาพใน API คลิปบอร์ดแบบไม่พร้อมกัน

และเราได้เพิ่มการรองรับรูปภาพไปยัง Asynchronous Clipboard API ทำให้การคัดลอกและวางรูปภาพแบบเป็นโปรแกรมเป็นเรื่องง่าย

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

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

ติดตาม

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

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