- ลักษณะการทำงานของการเพิ่มลงในหน้าจอหลักบน Android จะมีการเปลี่ยนแปลงเพื่อให้คุณควบคุมได้มากขึ้น
- Page Lifecycle API จะบอกคุณเมื่อแท็บถูกระงับหรือกู้คืน
- และ Payment Handler API ช่วยให้แอปการชำระเงินบนเว็บรองรับการใช้งานคำขอการชำระเงินได้
นอกจากนี้ยังมีอีกมากมาย
ฉันชื่อ 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 สำหรับนักพัฒนาซอฟต์แวร์ และแน่นอนว่ายังมีสิ่งใหม่ๆ อีกมากมาย
- เนื้อหาที่ฝังใน
iframe
ต้องใช้ท่าทางสัมผัสของผู้ใช้ในการนำทางบริบทการท่องเว็บระดับบนสุดไปยังต้นทางอื่น - ตั้งแต่ Chrome 1, ค่า CSS
cursor
สำหรับgrab
และgrabbing
นำหน้าไปแล้ว ตอนนี้เรารองรับค่ามาตรฐานที่ไม่มีคำนำหน้าแล้ว ในที่สุดแล้ว - ซึ่งพบกับการอัปเดตครั้งใหญ่ ตอนนี้ระบบไม่สนใจแคชของ HTTP เมื่อส่งคำขออัปเดตไปยังโปรแกรมทำงานของบริการ ซึ่งทำให้ Chrome อยู่ในบรรทัดเดียวกับข้อกำหนดและเบราว์เซอร์อื่นๆ
ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ
อย่าลืมดูมีอะไรใหม่ใน Chrome DevTools เพื่อดูว่ามีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 68
ติดตาม
จากนั้นคลิกปุ่มติดตามในช่อง YouTube ของเรา และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ผมชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 69 ผมจะบอกคุณว่า มีอะไรใหม่ใน Chrome!