ตั้งแต่ที่เราเปิดตัวแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" เป็นครั้งแรก เราได้พยายามติดป้ายกำกับ Progressive Web App ให้ชัดเจนยิ่งขึ้นและทำให้วิธีติดตั้งง่ายขึ้นสำหรับผู้ใช้ เป้าหมายสุดท้ายของเราคือให้ปุ่มติดตั้งในแถบอเนกประสงค์ในทุกแพลตฟอร์ม และใน Chrome 68 เรากำลังทำการเปลี่ยนแปลงเพื่อบรรลุเป้าหมายนั้น
สิ่งที่จะเปลี่ยนแปลงไป
เริ่มตั้งแต่ Chrome 68 บน Android (เสถียรในเดือนกรกฎาคม 2018) Chrome จะไม่แสดงแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" อีก หากเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มลงในหน้าจอหลัก Chrome จะแสดงแถบข้อมูลขนาดเล็ก จากนั้นหากผู้ใช้คลิกที่แถบข้อมูลขนาดเล็กหรือคุณเรียกใช้ prompt()
ในเหตุการณ์ beforeinstallprompt
จากท่าทางสัมผัสของผู้ใช้ Chrome จะแสดงการเพิ่มโมดัลลงในกล่องโต้ตอบหน้าจอหลัก
แบนเนอร์ A2HS Chrome 67 และก่อนหน้านี้
แสดงโดยอัตโนมัติเมื่อเว็บไซต์เป็นไปตามเกณฑ์การเพิ่มลงในหน้าจอหลัก และไซต์ไม่ได้เรียกใช้ preventDefault()
ในเหตุการณ์ beforeinstallprompt
หรือ
แสดงโดยการเรียก prompt()
ใน
beforeinstallprompt
กิจกรรม
Mini-infobar Chrome 68 ขึ้นไป
แสดงเมื่อเว็บไซต์เป็นไปตามเกณฑ์การเพิ่มลงในหน้าจอหลักหากผู้ใช้ปิด ก็จะไม่แสดงจนกว่าจะผ่านระยะเวลาที่เพียงพอ (ประมาณ 3 เดือน) ไปแล้ว
แสดงไม่ว่าจะมีการเรียกใช้ preventDefault()
ในเหตุการณ์ beforeinstallprompt
หรือไม่ก็ตาม
ระบบจะนำตัวเลือก UI นี้ออกใน Chrome เวอร์ชันในอนาคตเมื่อมีการใช้ปุ่มติดตั้งแถบอเนกประสงค์
กล่องโต้ตอบ A2HS
แสดงโดยการเรียกใช้ prompt()
จากภายในท่าทางสัมผัสของผู้ใช้ในเหตุการณ์ beforeinstallprompt
ใน Chrome 68 ขึ้นไป
หรือ
แสดงเมื่อผู้ใช้แตะแถบข้อมูลขนาดเล็กใน Chrome 68 ขึ้นไป
หรือ
แสดงหลังจากที่ผู้ใช้คลิก "เพิ่มในหน้าจอหลัก" จากเมนู Chrome ใน Chrome ทุกเวอร์ชัน
แถบข้อมูลขนาดเล็ก
แถบข้อมูลขนาดเล็กเป็นคอมโพเนนต์ UI ของ Chrome และไม่สามารถควบคุมได้โดยเว็บไซต์ แต่ผู้ใช้สามารถปิดได้อย่างง่ายดาย เมื่อผู้ใช้ปิดแล้ว ผู้ใช้จะไม่กลับมาแสดงอีกจนกว่าจะเวลาผ่านไประยะหนึ่ง (ปัจจุบันคือ 3 เดือน) แถบข้อมูลขนาดเล็กจะปรากฏขึ้นเมื่อเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มในหน้าจอหลัก ไม่ว่าคุณจะpreventDefault()
ในเหตุการณ์ beforeinstallprompt
หรือไม่ก็ตาม
แทนที่จะแจ้งผู้ใช้เมื่อโหลดหน้าเว็บ (รูปแบบการป้องกันสำหรับคำขอสิทธิ์) คุณอาจระบุว่าติดตั้งแอปได้ด้วย UI บางรายการ ซึ่งจะแสดงข้อความแจ้งการติดตั้งแบบโมดัล เช่น PWA ในเดสก์ท็อปจะเพิ่มปุ่ม "ติดตั้งแอป" เหนือชื่อโปรไฟล์ของผู้ใช้
การแจ้งให้ติดตั้งแอปด้วยท่าทางสัมผัสของผู้ใช้ทำให้รู้สึกเหมือนสแปมน้อยลงสำหรับผู้ใช้ และเพิ่มความเป็นไปได้ที่ผู้ใช้จะคลิก "เพิ่ม" แทน "ยกเลิก" การใช้ปุ่ม "ติดตั้ง" ในแอปของคุณหมายความว่าแม้ว่าผู้ใช้เลือกที่จะไม่ติดตั้งแอปของคุณในวันนี้ ปุ่มนั้นจะยังอยู่ ในวันพรุ่งนี้หรือพร้อมที่จะติดตั้งก็ตาม
กำลังฟังเหตุการณ์ beforeinstallprompt
หากเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มในหน้าจอหลัก Chrome จะเริ่มการทำงานของเหตุการณ์ beforeinstallprompt
บันทึกการอ้างอิงเหตุการณ์ และอัปเดตอินเทอร์เฟซผู้ใช้เพื่อระบุว่าผู้ใช้สามารถเพิ่มแอปลงในหน้าจอหลักของตนได้
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;
});
เหตุการณ์ beforeinstallprompt
จะไม่เริ่มทํางานหากมีการติดตั้งแอปแล้ว (ดูเกณฑ์การเพิ่มลงในหน้าจอหลัก)
แต่หากผู้ใช้ถอนการติดตั้งแอปในภายหลัง เหตุการณ์ beforeinstallprompt
จะเริ่มทำงานอีกครั้งในการนำทางหน้าเว็บแต่ละหน้า
กําลังแสดงกล่องโต้ตอบกับ prompt()
หากต้องการแสดงกล่องโต้ตอบการเพิ่มลงในหน้าจอหลัก ให้เรียกใช้ prompt()
ในเหตุการณ์ที่บันทึกไว้จากภายในท่าทางสัมผัสของผู้ใช้ Chrome จะแสดงกล่องโต้ตอบโมดัลที่แจ้งให้ผู้ใช้
เพิ่มแอปลงในหน้าจอหลัก จากนั้น ฟังคำมั่นสัญญาที่พร็อพเพอร์ตี้ userChoice
แสดงผลของเหตุการณ์ beforeinstallprompt
สัญญาจะแสดงผลออบเจ็กต์ที่มีพร็อพเพอร์ตี้ outcome
หลังจากที่ระบบแสดงข้อความแจ้งและผู้ใช้ตอบสนองแล้ว
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(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
คุณจะเรียกใช้ prompt()
ในเหตุการณ์ที่เลื่อนเวลาออกไปได้เพียงครั้งเดียว หากผู้ใช้คลิกยกเลิกในกล่องโต้ตอบ คุณจะต้องรอจนกว่าเหตุการณ์ beforeinstallprompt
จะเริ่มทำงานในการนำทางหน้าถัดไป การคลิก "ยกเลิก" จะไม่บล็อกการเรียกใช้ prompt()
ในอนาคตเนื่องจากคำขอสิทธิ์แบบดั้งเดิมจะต้องเรียกใช้จากท่าทางสัมผัสของผู้ใช้
แหล่งข้อมูลเพิ่มเติม
ดูแบนเนอร์การติดตั้งแอป สำหรับข้อมูลเพิ่มเติม ซึ่งรวมถึง
- รายละเอียดเกี่ยวกับเหตุการณ์
beforeinstallprompt
- ติดตามการตอบสนองของผู้ใช้ต่อข้อความแจ้ง "เพิ่มหน้าจอหลัก"
- การติดตามว่าแอปได้รับการติดตั้งหรือไม่
- การพิจารณาว่าแอปของคุณทำงานเป็นแอปที่ติดตั้งอยู่หรือไม่