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

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

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

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

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

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

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

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

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

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