นับตั้งแต่เปิดตัวแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" เป็นครั้งแรก เราพยายามติดป้ายกำกับ Progressive Web App ให้ชัดเจนขึ้นและลดความซับซ้อนของวิธีติดตั้งสำหรับผู้ใช้ เป้าหมายสุดท้ายของเราคือการมีปุ่มติดตั้งในแถบที่อยู่สำหรับทุกแพลตฟอร์ม และใน Chrome 68 เรากำลังทำการเปลี่ยนแปลงเพื่อบรรลุเป้าหมายดังกล่าว
สิ่งที่จะเปลี่ยนแปลงไป
ตั้งแต่ Chrome เวอร์ชัน 68 บน Android (เวอร์ชันเสถียรในเดือนกรกฎาคม 2018) เป็นต้นไป Chrome จะไม่แสดงแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" อีกต่อไป หากเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มลงในหน้าจอหลัก Chrome จะแสดงแถบข้อมูลขนาดเล็ก จากนั้น หากผู้ใช้คลิกที่แถบข้อมูลขนาดเล็ก หรือคุณเรียก prompt()
ในเหตุการณ์ beforeinstallprompt
จากภายในท่าทางสัมผัสของผู้ใช้ Chrome จะแสดงกล่องโต้ตอบแบบโมดัลเพื่อเพิ่มลงในหน้าจอหลัก
แบนเนอร์ A2HS Chrome 67 และเวอร์ชันก่อนหน้า
![ภาพหน้าจอแบนเนอร์ A2HS](https://developer.chrome.google.cn/static/blog/a2hs-updates/image/a2hs-banner-screenshot-8542fefb412cd.png?hl=th)
แสดงโดยอัตโนมัติเมื่อเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มลงในหน้าจอหลัก และเว็บไซต์ไม่ได้เรียกใช้ preventDefault()
ในเหตุการณ์ beforeinstallprompt
หรือ
แสดงโดยการเรียก prompt()
ในเหตุการณ์ beforeinstallprompt
แถบข้อมูลขนาดเล็ก Chrome 68 ขึ้นไป
![ภาพหน้าจอของแถบข้อมูล A2HS](https://developer.chrome.google.cn/static/blog/a2hs-updates/image/a2hs-infobar-screenshot-06006454a3276.png?hl=th)
หากผู้ใช้ปิด โฆษณาจะไม่แสดงจนกว่าจะผ่านระยะเวลาที่เพียงพอ (~3 เดือน)
แสดงไม่ว่าจะมีการเรียกใช้ preventDefault()
ในเหตุการณ์ beforeinstallprompt
หรือไม่ก็ตาม
เราจะนำการแสดงผล UI นี้ออกใน Chrome เวอร์ชันถัดไปเมื่อเปิดตัวปุ่มติดตั้งในแถบอเนกประสงค์
A2HS Dialog
![ภาพหน้าจอกล่องโต้ตอบ A2HS](https://developer.chrome.google.cn/static/blog/a2hs-updates/image/a2hs-dialog-screenshot-8ea2a4d1d8e7d.png?hl=th)
แสดงโดยการเรียก prompt()
จากภายในท่าทางสัมผัสของผู้ใช้ในงาน beforeinstallprompt
ใน Chrome 68 ขึ้นไป
หรือ
แสดงเมื่อผู้ใช้แตะแถบข้อมูลขนาดเล็กใน Chrome 68 ขึ้นไป
หรือ
แสดงหลังจากที่ผู้ใช้คลิก "เพิ่มลงในหน้าจอหลัก" จากเมนู Chrome ใน Chrome ทุกเวอร์ชัน
มินิแถบข้อมูล
![ภาพหน้าจอของแถบข้อมูลขนาดเล็ก](https://developer.chrome.google.cn/static/blog/a2hs-updates/image/the-mini-infobar-screensh-5572362029c4a.png?hl=th)
แถบข้อมูลขนาดเล็กเป็นคอมโพเนนต์ UI ของ Chrome และเว็บไซต์ไม่สามารถควบคุมได้ แต่ผู้ใช้สามารถปิดได้อย่างง่ายดาย เมื่อผู้ใช้ปิดแล้ว ข้อความจะไม่ปรากฏขึ้นอีกจนกว่าจะผ่านระยะเวลาที่เพียงพอ (ปัจจุบันคือ 3 เดือน) แถบข้อมูลขนาดเล็กจะปรากฏขึ้นเมื่อเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มลงในหน้าจอหลัก ไม่ว่าคุณจะpreventDefault()
ในเหตุการณ์ beforeinstallprompt
หรือไม่ก็ตาม
![แนวคิดเริ่มต้นของปุ่มติดตั้งในแถบอเนกประสงค์](https://developer.chrome.google.cn/static/blog/a2hs-updates/image/early-concept-the-instal-946309cffea8f.png?hl=th)
![ปุ่มติดตั้งใน Progressive Web App บนเดสก์ท็อป](https://developer.chrome.google.cn/static/blog/a2hs-updates/image/install-button-a-desktop-f7c2eaa01a6d4.png?hl=th)
แทนที่จะแสดงข้อความแจ้งให้ผู้ใช้เมื่อโหลดหน้าเว็บ (รูปแบบที่ไม่แนะนำสำหรับคำขอสิทธิ์) คุณระบุได้ว่าแอปของคุณติดตั้งได้ด้วย 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()
![กล่องโต้ตอบ "เพิ่มลงในหน้าจอหลัก"](https://developer.chrome.google.cn/static/blog/a2hs-updates/image/add-home-screen-dialog-77988215a6ce1.png?hl=th)
หากต้องการแสดงกล่องโต้ตอบ "เพิ่มลงในหน้าจอหลัก" ให้เรียกใช้ 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
- ติดตามการตอบสนองของผู้ใช้ต่อข้อความแจ้งให้เพิ่มในหน้าจอหลัก
- ติดตามว่าติดตั้งแอปแล้วหรือยัง
- ระบุว่าแอปทํางานเป็นแอปที่ติดตั้งหรือไม่