ต้องทำอะไรบ้างจึงจะติดตั้งได้

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

ผู้ใช้ส่วนใหญ่คุ้นเคยกับการติดตั้งแอปพลิเคชันและข้อดีของประสบการณ์ที่ติดตั้งไว้ แอปพลิเคชันที่ติดตั้งจะปรากฏในแพลตฟอร์มการเปิดใช้ของระบบปฏิบัติการ เช่น โฟลเดอร์แอปพลิเคชันใน Mac OS X เมนูเริ่มต้นใน Windows และหน้าจอหลักใน Android และ iOS แอปพลิเคชันที่ติดตั้งจะแสดงในเครื่องมือสลับกิจกรรม เครื่องมือค้นหาในอุปกรณ์ เช่น สปอตไลท์ และในชีตการแชร์เนื้อหา

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

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

นอกจากนี้ เมื่อเป็นไปตามเกณฑ์ เบราว์เซอร์จำนวนมากจะเริ่มการทำงานของเหตุการณ์ beforeinstallprompt ซึ่งจะช่วยให้คุณระบุ UX ในแอปที่กำหนดเองซึ่งจะเรียกขั้นตอนการติดตั้งภายในแอปได้

เกณฑ์การติดตั้ง

ใน Chrome Progressive Web App ต้องเป็นไปตามเกณฑ์ต่อไปนี้ก่อน เหตุการณ์ beforeinstallprompt จึงจะเริ่มการทำงานของเหตุการณ์ beforeinstallprompt และแสดงโปรโมชันการติดตั้งในเบราว์เซอร์

  • ยังไม่ได้ติดตั้งเว็บแอป
  • สอดคล้องกับวิธีการเรียนรู้การมีส่วนร่วมของผู้ใช้
    • ผู้ใช้ต้องคลิกหรือแตะหน้าดังกล่าวอย่างน้อย 1 ครั้ง (เมื่อใดก็ได้ แม้ในการโหลดหน้าเว็บก่อนหน้า)
    • ผู้ใช้ต้องใช้เวลาอย่างน้อย 30 วินาทีในการดูหน้าเว็บ (เมื่อใดก็ได้)
  • แสดงผลผ่าน HTTPS
  • รวมไฟล์ Manifest ของเว็บแอปที่ประกอบไปด้วย
    • short_name หรือ name
    • icons - ต้องมีไอคอนขนาด 192 พิกเซลและ 512 พิกเซล
    • start_url
    • display - ต้องเป็นค่าใดค่าหนึ่งระหว่าง fullscreen, standalone หรือ minimal-ui
    • prefer_related_applications ต้องไม่อยู่ หรือต้องเป็น false

เบราว์เซอร์อื่นมีเกณฑ์การติดตั้งใกล้เคียงกัน แต่ก็อาจมีความแตกต่างเล็กน้อย ตรวจสอบเว็บไซต์ที่เกี่ยวข้องเพื่อดูรายละเอียดทั้งหมด: