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

Pete LePage

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

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

เบราว์เซอร์ส่วนใหญ่จะแจ้งให้ผู้ใช้ทราบว่าติดตั้ง 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

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