นับตั้งแต่เปิดตัวแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" เป็นครั้งแรก เราพยายามติดป้ายกำกับ Progressive Web App ให้ชัดเจนขึ้นและลดความซับซ้อนของวิธีติดตั้งสำหรับผู้ใช้ เป้าหมายสุดท้ายของเราคือการมีปุ่มติดตั้งในแถบที่อยู่สำหรับทุกแพลตฟอร์ม และใน Chrome 68 เรากำลังทำการเปลี่ยนแปลงเพื่อบรรลุเป้าหมายดังกล่าว
สิ่งที่จะเปลี่ยนแปลงไป
ตั้งแต่ Chrome เวอร์ชัน 68 บน Android (เวอร์ชันเสถียรในเดือนกรกฎาคม 2018) เป็นต้นไป Chrome จะไม่แสดงแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" อีกต่อไป หากเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มลงในหน้าจอหลัก Chrome จะแสดงแถบข้อมูลขนาดเล็ก จากนั้น หากผู้ใช้คลิกที่แถบข้อมูลขนาดเล็ก หรือคุณเรียก prompt()
ในเหตุการณ์ beforeinstallprompt
จากภายในท่าทางสัมผัสของผู้ใช้ Chrome จะแสดงกล่องโต้ตอบแบบโมดัลเพื่อเพิ่มลงในหน้าจอหลัก
แบนเนอร์ A2HS Chrome 67 และเวอร์ชันก่อนหน้า

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

หากผู้ใช้ปิด โฆษณาจะไม่แสดงจนกว่าจะผ่านระยะเวลาที่เพียงพอ (~3 เดือน)
แสดงไม่ว่าจะมีการเรียกใช้ preventDefault()
ในเหตุการณ์ beforeinstallprompt
หรือไม่ก็ตาม
เราจะนำการแสดงผล UI นี้ออกใน Chrome เวอร์ชันถัดไปเมื่อเปิดตัวปุ่มติดตั้งในแถบอเนกประสงค์
A2HS Dialog

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