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

Pete LePage

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

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

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

Page Lifecycle 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 เพื่อดูรายละเอียดเพิ่มเติมมากมาย รวมถึงตัวอย่างโค้ด เคล็ดลับ และอื่นๆ คุณดูข้อกําหนดและเอกสารอธิบายได้ใน GitHub

Payment Handler API

Payment Request API เป็นวิธีแบบเปิดตามมาตรฐานในการรับการชำระเงิน Payment Handler 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' }
  }
});

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

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

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

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

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

อย่าลืมดูสิ่งใหม่ๆ ใน Chrome DevTools เพื่อดูข้อมูลเกี่ยวกับฟีเจอร์ใหม่ๆ ใน DevTools ของ Chrome 68

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

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

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