เบื้องหลังของ Progressive Web App และแถบข้อมูลขนาดเล็ก
Progressive Web App (PWA) คือรูปแบบสำหรับ การสร้างเว็บไซต์ที่โหลดได้ทันที น่าเชื่อถือ ติดตั้งได้ และมีลักษณะการใช้คล้ายกับแอป
เมื่อ PWA ผ่าน รายการตรวจสอบการติดตั้งใน Android กล่องโต้ตอบของระบบ Chrome ที่เรียกว่าแถบข้อมูลขนาดเล็กจะปรากฏที่ ด้านล่างของหน้าต่างเบราว์เซอร์
ปัจจุบันมินิแถบข้อมูล "เพิ่มลงในหน้าจอหลัก" จะแสดงพร้อมกับ
beforeinstallprompt
กิจกรรม
การเปลี่ยนแปลงใน Chrome 76
เราได้ฟังความคิดเห็นจากชุมชน และทราบว่านักพัฒนาแอป ต้องการควบคุมเวลาที่จะขอให้ผู้ใช้ติดตั้ง PWA มากขึ้น และเราก็อยากจะตอบรับเสียงเรียกร้องเหล่านั้น
ตั้งแต่ Chrome 76 เป็นต้นไป คุณจะป้องกันแถบข้อมูลขนาดเล็กได้โดยเรียกใช้
preventDefault() ในเหตุการณ์ beforeinstallprompt
beforeinstallprompt เหตุการณ์นี้จะช่วยโปรโมตการติดตั้ง
Progressive Web App ทำให้ผู้ใช้เพิ่มแอปดังกล่าวลงในหน้าจอหลักได้ง่าย
ชุมชนของเราได้แชร์ว่าผู้ใช้ที่ติดตั้ง PWA ลงในหน้าจอหลักมีส่วนร่วมสูงมาก โดยมีการเข้าชมซ้ำมากขึ้น เวลาที่ใช้ในแอป และอัตรา Conversion ที่สูงขึ้น (หากมี)
หากต้องการโปรโมตเว็บแอปโดยไม่มีแถบข้อมูลขนาดเล็ก ให้รอรับเหตุการณ์
beforeinstallprompt แล้วบันทึกเหตุการณ์ จากนั้นอัปเดตอินเทอร์เฟซผู้ใช้เพื่อระบุว่าติดตั้ง PWA ได้ เช่น เพิ่ม
ปุ่มติดตั้ง แสดงแบนเนอร์ติดตั้ง ใช้โปรโมชันในฟีด หรือ
ตัวเลือกเมนู เมื่อผู้ใช้คลิกองค์ประกอบการติดตั้ง ให้เรียกใช้เหตุการณ์ prompt() on
beforeinstallprompt ที่บันทึกไว้เพื่อแสดงกล่องโต้ตอบแบบโมดอลเพิ่มลงในหน้าจอหลัก
อนาคตของแถบข้อมูลย่อ "เพิ่มลงในหน้าจอหลัก"
การใช้แถบข้อมูล "เพิ่มลงในหน้าจอหลัก" ยังคงเป็นมาตรการชั่วคราว เรากำลังทดสอบรูปแบบ UI ใหม่ที่จะช่วยให้ผู้ใช้ Progressive Web App ติดตั้งแอปได้ต่อไป และทำในลักษณะที่จะลดความรกในประสบการณ์การท่องเว็บ