คุณซ่อนแถบข้อมูลขนาดเล็กของ "เพิ่มลงในหน้าจอหลัก" ได้ใน Chrome 76

Penny McLachlan
Penny McLachlan

ความเป็นมาเกี่ยวกับ Progressive Web App และแถบข้อมูลขนาดเล็ก

Progressive Web App (PWA) เป็นรูปแบบในการสร้างเว็บไซต์แบบแอปที่โหลดทันที เชื่อถือได้ และติดตั้งได้

เมื่อ PWA ผ่านรายการตรวจสอบความสามารถในการติดตั้งใน Android กล่องโต้ตอบของระบบ Chrome ที่เรียกว่าแถบข้อมูลขนาดเล็กจะปรากฏขึ้นที่ด้านล่างของหน้าต่างเบราว์เซอร์

ปัจจุบันแถบข้อมูลขนาดเล็ก "เพิ่มลงในหน้าจอหลัก" จะแสดงพร้อมกับเหตุการณ์ beforeinstallprompt

การเปลี่ยนแปลงใน Chrome 76

เรารับฟังความคิดเห็นจากชุมชนมาเป็นอย่างดีและได้ฟังมาว่านักพัฒนาแอปต้องการควบคุมได้มากขึ้นว่าจะขอให้ผู้ใช้ติดตั้ง PWA เมื่อใด และเราก็อยากจะตอบรับเสียงเรียกร้องเหล่านั้น

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

เหตุการณ์ beforeinstallprompt ช่วยคุณโปรโมตการติดตั้ง Progressive Web App ได้ ซึ่งช่วยให้ผู้ใช้เพิ่มแอปลงในหน้าจอหลักได้ง่าย ชุมชนของเราได้แจ้งว่าผู้ใช้ที่ติดตั้ง PWA ในหน้าจอหลักมีส่วนร่วมสูง โดยมีการเข้าชมซ้ำมากขึ้น ใช้เวลาในแอปมากขึ้น และมีอัตรา Conversion สูงกว่าในกรณีที่เกี่ยวข้อง

ตัวอย่าง Pinterest ที่ใช้แบนเนอร์การติดตั้งเพื่อโปรโมตความสามารถในการติดตั้งของ PWA
ตัวอย่างของ Pinterest ที่ใช้แบนเนอร์การติดตั้งเพื่อโปรโมตความสามารถในการติดตั้งของ PWA ดูรายละเอียดทั้งหมดเกี่ยวกับขั้นตอนการเพิ่มลงในหน้าจอหลัก รวมถึงตัวอย่างโค้ด และแนวทางปฏิบัติแนะนำอื่นๆ ได้ที่เพิ่มลงในหน้าจอหลัก

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

อนาคตของแถบข้อมูลขนาดเล็ก "เพิ่มลงในหน้าจอหลัก"

แต่การใช้แถบข้อมูล "เพิ่มลงในหน้าจอหลัก" ยังคงเป็นเพียงมาตรการชั่วคราว เรากำลังทดลองรูปแบบ UI ใหม่ๆ ที่จะช่วยให้ผู้ใช้ Progressive Web App ติดตั้งได้ต่อไปโดยที่จะลดความยุ่งเหยิงของการท่องเว็บ