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

พีต เลอเพจ

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

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

หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด โปรดดูรายการการเปลี่ยนแปลงที่เก็บแหล่งที่มา Chromium

เพิ่มการเปลี่ยนแปลงในหน้าจอหลัก

หากเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มในหน้าจอหลัก Chrome จะไม่แสดงแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" อีกต่อไป แต่คุณควบคุมได้ว่าจะให้แจ้งเตือนผู้ใช้เมื่อใดและอย่างไร

หากต้องการแจ้งผู้ใช้ ให้ฟังเหตุการณ์ beforeinstallprompt จากนั้นบันทึกเหตุการณ์และเพิ่มปุ่มหรือองค์ประกอบ UI อื่นๆ ลงในแอปเพื่อระบุว่าติดตั้งได้

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

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


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

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

การเปลี่ยนแปลงลักษณะการทำงานของการเพิ่มไปยังหน้าจอหลักมีรายละเอียดทั้งหมด ซึ่งรวมถึงตัวอย่างโค้ดที่คุณใช้ได้และอีกมากมาย

API วงจรการใช้งานหน้าเว็บ

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

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

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

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

ลองดูโพสต์ Page Lifecycle API ของ Phil เพื่อดูรายละเอียดเพิ่มเติมจำนวนมาก ซึ่งรวมถึงตัวอย่างโค้ด เคล็ดลับ และอื่นๆ คุณดูspecและเอกสารอธิบายได้ใน GitHub

API เครื่องจัดการการชำระเงิน

API คำขอการชำระเงินเป็นวิธีการแบบเปิดที่อิงตามมาตรฐานเพื่อรับการชำระเงิน API เครื่องจัดการการชำระเงินขยายการเข้าถึงคำขอการชำระเงินโดยการเปิดใช้แอปการชำระเงินบนเว็บเพื่ออำนวยความสะดวกในการชำระเงินโดยตรงภายในประสบการณ์ในการส่งคำขอการชำระเงิน

ในฐานะผู้ขาย การเพิ่มแอปการชำระเงินบนเว็บที่มีอยู่นั้นง่ายพอๆ กับการเพิ่มรายการลงในพร็อพเพอร์ตี้ supportedMethods

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

หากมีการติดตั้งโปรแกรมทำงานของบริการที่สามารถจัดการวิธีการชำระเงินที่ระบุได้ โปรแกรมทำงานของบริการจะปรากฏใน UI คำขอการชำระเงิน และผู้ใช้สามารถชำระเงินได้ด้วย

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

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

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

ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

อย่าลืมดูมีอะไรใหม่ใน Chrome DevTools เพื่อดูว่ามีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 68

ติดตาม

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

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