ผู้ใช้อาจไม่คุ้นเคยกับกระบวนการติดตั้ง PWA ในฐานะนักพัฒนาซอฟต์แวร์ คุณจะทราบว่าเมื่อใดที่ควรเชิญผู้ใช้ให้ติดตั้งแอป และยังปรับปรุงข้อความแจ้งการติดตั้งเบราว์เซอร์เริ่มต้นได้ด้วย ลองมาดูเครื่องมือที่พร้อมใช้งานกัน
กําลังปรับปรุงกล่องโต้ตอบการติดตั้ง
โดยเบราว์เซอร์จะแสดงข้อความแจ้งให้ติดตั้งเริ่มต้นเมื่อ PWA ผ่านเกณฑ์การติดตั้ง เบราว์เซอร์จะใช้พร็อพเพอร์ตี้ name
และ icons
จากไฟล์ Manifest ของเว็บแอปเพื่อสร้างข้อความแจ้ง
บางเบราว์เซอร์จะช่วยปรับปรุงประสบการณ์ในการติดตั้งข้อความแจ้งโดยใช้ช่องการโปรโมตในไฟล์ Manifest รวมถึง description
, categories
และ screenshots
ตัวอย่างเช่น การใช้ Chrome ใน Android หาก PWA ของคุณระบุค่าสำหรับช่อง description
และ screenshots
กล่องโต้ตอบการติดตั้งจะเปลี่ยนจากแถบข้อมูลเพิ่มลงในหน้าจอหลักขนาดเล็กเป็นกล่องโต้ตอบขนาดใหญ่และมีรายละเอียดมากขึ้น ซึ่งคล้ายกับข้อความแจ้งให้ติดตั้งจาก App Store
ดูการทํางานจริงของช่องโปรโมชัน
เหตุการณ์ beforeinstallprompt
ข้อความแจ้งให้ติดตั้งของเบราว์เซอร์เป็นขั้นตอนแรกในการแจ้งให้ผู้ใช้ติดตั้ง PWA หากต้องการใช้ประสบการณ์การติดตั้งของคุณเอง แอปยังคงต้องผ่านเกณฑ์การติดตั้ง นั่นคือเมื่อเบราว์เซอร์ตรวจพบว่าแอปของคุณติดตั้งได้ เหตุการณ์ beforeinstallprompt
จะเริ่มทํางาน คุณต้องติดตั้งใช้งานเครื่องจัดการเหตุการณ์นี้เพื่อปรับแต่งประสบการณ์ของผู้ใช้ ดังนี้
- ฟังเหตุการณ์
beforeinstallprompt
- บันทึก (จะต้องใช้ในภายหลัง)
- ทริกเกอร์จาก UI
ตรวจสอบโค้ดด้านล่างเพื่อดูตัวอย่าง Listener เหตุการณ์สำหรับเหตุการณ์ beforeinstallprompt
, การบันทึก และการใช้งานที่กำหนดเองในภายหลัง
// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevents the default mini-infobar or install dialog from appearing on mobile
e.preventDefault();
// Save the event because you'll need to trigger it later.
deferredPrompt = e;
// Show your customized install prompt for your PWA
// Your own UI doesn't have to be a single element, you
// can have buttons in different locations, or wait to prompt
// as part of a critical journey.
showInAppInstallPromotion();
});
จากนั้น หากผู้ใช้คลิกปุ่มติดตั้งที่กำหนดเอง ให้ใช้ deferredPrompt
ที่บันทึกไว้ก่อนหน้านี้และเรียกใช้เมธอด prompt()
เนื่องจากผู้ใช้ยังคงต้องทำตามขั้นตอนของเบราว์เซอร์เพื่อติดตั้งแอป สิ่งที่คุณทำคือการเลื่อนเหตุการณ์ออกไปจนกว่าคุณจะให้บริบทที่เหมาะสมแก่ผู้ใช้เพื่อกระตุ้นให้ผู้ใช้ติดตั้ง PWA
การบันทึกกิจกรรมช่วยให้คุณสามารถเพิ่มคำแนะนำและสิ่งจูงใจเพื่อให้ผู้ใช้ติดตั้งแอปของคุณ และเลือกที่จะแจ้งให้ติดตั้งเมื่อคุณทราบว่าผู้ใช้มีส่วนร่วมมากขึ้น
เหตุการณ์จะไม่เริ่มทํางานในกรณีต่อไปนี้
- ผู้ใช้ติดตั้ง PWA ปัจจุบันแล้ว (ใช้ได้กับเดสก์ท็อปและ WebAPK ใน Android เท่านั้น)
- แอปไม่ผ่านเกณฑ์การติดตั้ง PWA
- PWA ติดตั้งในอุปกรณ์ปัจจุบันไม่ได้ด้วยเหตุผลอื่นๆ (เช่น อุปกรณ์ในโหมดคีออสก์หรือไม่มีสิทธิ์)
ที่ที่ดีที่สุดในการส่งข้อความแจ้ง
ตำแหน่งที่คุณแจ้งจะขึ้นอยู่กับแอปพลิเคชันและเวลาที่ผู้ใช้มีส่วนร่วมกับเนื้อหาและบริการมากที่สุด เมื่อคุณใช้ beforeinstallprompt
คุณจะแนะนำผู้ใช้เกี่ยวกับเหตุผลที่ควรใช้งานแอปต่อและข้อดีที่ผู้ใช้จะได้รับจากการติดตั้งแอปได้
คุณสามารถเลือกแสดงคำแนะนำการติดตั้งที่ใดก็ได้ในแอป รูปแบบที่พบบ่อยบางส่วนมีดังนี้ ในเมนูด้านข้าง หลังเส้นทางสำคัญของผู้ใช้ เช่น สั่งซื้อสำเร็จ หรือหลังจากหน้าลงชื่อสมัครใช้ อ่านข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในรูปแบบที่โปรโมตการติดตั้ง PWA
การรวบรวมข้อมูลวิเคราะห์
การใช้ข้อมูลวิเคราะห์จะช่วยให้คุณเข้าใจได้ดีขึ้นว่าควรนำเสนอพรอมต์ของคุณที่ไหนและเมื่อใด คุณใช้พร็อพเพอร์ตี้ userChoice
จากเหตุการณ์ beforeinstallprompt
ได้ userChoice
เป็นคำมั่นสัญญาที่จะแก้ไขตามการดำเนินการที่ผู้ใช้ทำ
// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
// deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
deferredPrompt.prompt();
// Find out whether the user confirmed the installation or not
const { outcome } = await deferredPrompt.userChoice;
// The deferredPrompt can only be used once.
deferredPrompt = null;
// Act on the user's choice
if (outcome === 'accepted') {
console.log('User accepted the install prompt.');
} else if (outcome === 'dismissed') {
console.log('User dismissed the install prompt');
}
});
ดูของจริง
ลองใช้ตัวอย่างต่อไปนี้ในเบราว์เซอร์ Chromium (เดสก์ท็อปหรือ Android)
Fallback
หากเบราว์เซอร์ไม่สนับสนุน beforeinstallprompt
หรือเหตุการณ์ไม่เริ่มทำงาน จะไม่มีวิธีอื่นที่จะเรียกข้อความแจ้งการติดตั้งของเบราว์เซอร์ได้ อย่างไรก็ตาม คุณแสดงวิธีการเหล่านี้แก่ผู้ใช้ได้ในแพลตฟอร์มที่อนุญาตให้ผู้ใช้ติดตั้ง PWA ด้วยตนเอง เช่น iOS
คุณควรแสดงวิธีการเหล่านี้ในโหมดเบราว์เซอร์ ตัวเลือกการแสดงผลอื่นๆ เช่น standalone
หรือ fullscreen
หมายความว่าผู้ใช้ได้ติดตั้งแอปแล้ว
หากต้องการแสดงผลองค์ประกอบเฉพาะในโหมดเบราว์เซอร์ ให้ใช้คิวรี่สื่อ display-mode
ดังนี้
#installInstructions {
display: none
}
@media (display-mode: browser) {
#installInstructions {
display: block
}
}
Codelab
ห้องสมุด
ดูไลบรารีต่อไปนี้เพื่อช่วยในการแสดงข้อความแจ้งการติดตั้งแบบกำหนดเอง
- เครื่องมือสร้าง PWA
- ข้อความแจ้งโปรแกรมติดตั้ง PWA สำหรับ React
- ตอบสนองต่อการติดตั้ง PWA
- ติดตั้ง Vue PWA
- เพิ่มลงในหน้าจอหลัก