การติดตั้งแถบที่อยู่สำหรับ Progressive Web App บนเดสก์ท็อป

Progressive Web App ติดตั้งง่ายด้วยปุ่มติดตั้งใหม่ในแถบที่อยู่ของ Chrome (แถบอเนกประสงค์)

ในเดสก์ท็อป โดยปกติจะไม่มีการแจ้งให้ผู้ใช้ทราบว่า Progressive Web App ติดตั้งได้ และถ้าเป็นเช่นนั้น ขั้นตอนการติดตั้งจะซ่อนอยู่ภายในเมนู 3 จุด

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

คุณสามารถฟังเหตุการณ์ appinstalled เพื่อตรวจหาว่าผู้ใช้ติดตั้ง PWA หรือไม่ เช่นเดียวกับเหตุการณ์การติดตั้งอื่นๆ

การเพิ่มข้อความแจ้งให้ติดตั้งของคุณเอง

หาก PWA มีกรณีการใช้งานที่เป็นประโยชน์สำหรับผู้ใช้ติดตั้งแอป เช่น หากมีผู้ใช้ที่ใช้แอปมากกว่า 1 ครั้งต่อสัปดาห์ คุณควรโปรโมตการติดตั้ง PWA ภายใน UI บนเว็บของแอป

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

รูปแบบที่โปรโมตการติดตั้ง PWA

คุณโปรโมตการติดตั้ง PWA ได้ 3 วิธีหลักๆ ดังนี้

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

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