ฟีเจอร์ใหม่ใน 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 ซึ่งคุณสามารถรีนิ initialize ทุกอย่างที่ยกเลิกได้

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