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

Pete LePage

ใน Chrome 76 เราได้เพิ่มการรองรับสิ่งต่อไปนี้

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

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

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

หากเว็บไซต์ของคุณเป็นไปตามเกณฑ์ความสามารถในการติดตั้ง Progressive Web App Chrome จะแสดงปุ่มติดตั้งในแถบที่อยู่แบบ Omnibox เพื่อแจ้งให้ผู้ใช้ทราบว่าสามารถติดตั้ง 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 Query ช่วยให้คุณปรับรูปลักษณ์ของเว็บไซต์ให้ตรงกับโหมดที่ผู้ใช้ต้องการได้

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

Tom มีบทความที่ยอดเยี่ยมชื่อ Hello darkness, my old friend ใน 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);
});

การรองรับรูปภาพใน Async Clipboard API

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

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

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

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

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

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