การติดตั้งแถบที่อยู่สำหรับ 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 ของคุณมีกรณีการใช้งานที่เป็นประโยชน์ต่อผู้ใช้ในการติดตั้งแอป เช่น หากคุณมีผู้ใช้ที่ใช้แอปมากกว่าสัปดาห์ละครั้ง คุณควรโปรโมตการติดตั้ง PWA ภายใน UI ของเว็บแอป

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

รูปแบบสำหรับโปรโมตการติดตั้ง PWA

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

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

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