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

Pete LePage

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

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

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

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

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

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

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

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

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