MISTER KNOW PROFESSIONAL & LIGHTNING-FAST SEO WEB DESIGN BASED ON CORE WEB VITALS - GOOGLE PAGE SPEED INSIGHTS
SEO | WEB DESIGN | TECHNOLOGY BLOG

PWA เว็บไซต์ที่ติดตั้งได้อย่าง App


PWA คืออะไร? ทำไมถึงน่าสนใจสำหรับธุรกิจยุคใหม่

๐๘ ๘๗๕๗ ๐๙๐๑ misterknow

PWA Web Development Mobile

PWA เว็บไซต์ที่ติดตั้งได้อย่าง App

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

จุดเด่นของ PWA (Progressive Web App)

  • Installable: สามารถติดตั้งลงบนหน้าจอ Home Screen ได้เหมือนแอปทั่วไป ซึ่งคุณสมบัติส่วนใหญ่แตกต่างจาก การทำ Shortcut หรือ การเลือกใช้คำสั่ง Save page as
  • Offline Mode: ทำงานได้แม้ไม่มีอินเทอร์เน็ต หรืออินเทอร์เน็ตไม่เสถียร ประหนึ่งแหล่งเก็บข้อมูลสำรองของหน้าข้อมูลทั้งหมดที่ได้เปิดดูหรืออ่านขณะออนไลน์
  • App-like Experience: การใช้งานลื่นไหล มี Animation และ Interaction เหมือน Native App
  • Push Notifications: สามารถส่งการแจ้งเตือนหาผู้ใช้งานได้ (บน Android และ Desktop)

ทำไมต้องทำ PWA (Progressive Web App)?

การพัฒนา PWA (Progressive Web App) ช่วยลดต้นทุนในการพัฒนา Mobile App แยกต่างหากตามแต่ละระบบอย่างเช่น (iOS/Android) ซึ่งมีใช้งานอยู่ ณ ปัจจุบัน และ พัฒนาครั้งเดียวให้อยู่ในรูปแบบ "Website Application" สามารถใช้งานได้บนทุกแพลตฟอร์ม นอกจากนี้ยังคงช่วยในเรื่องของ SEO เพราะเนื้อหายังคงไหลมาจากเว็บไซต์ซึ่งออนไลน์และ Google สามารถเข้าไปเก็บรวบรวมข้อมูลได้

"PWA คืออนาคตของ Mobile Web ที่ช่วยให้ธุรกิจเข้าถึงลูกค้าได้ง่ายขึ้น เร็วขึ้น และมีประสิทธิภาพมากขึ้น และในทางกลับกัน ลูกค้าก็สามารถติดต่อกับเราได้ง่ายและสะดวกขึ้น ตลอดจนเปิดดูข้อมูลเงื่อนไขการให้บริการสินค้าได้ทุกเมื่อๆต้องการ"

ขั้นตอนการติดตั้ง PWA (Progressive Web App)

Progressive Web App - PWA - เว็บแอป

จากภาพบน การติดตั้งมี ๒ แบบ

  1. ติดตั้งด้วยการคลิก Install บนปุ่ม B ซึ่งเด้งขึ้นมาจากด้านบนของจอมือถือ หรือเลือกคลิก ปุ่ม หรือ แถบ A ใน คอมพิวเตอร์ทั่วไป และ คลิก Install บนปุ่ม B
  2. ติดตั้งด้วยตนเอง กรณีไม่เห็น ปุ่ม หรือ แถบ A ด้วยการคลิกปุ่มตามลำดับ "Tooltip" สีแดง ๑, ๒, ๓
  3. จากข้อ ๒ จะพบขั้นตอนที่ ๓ มีสองตัวเลือก
    1. ถ้าเลือก ๓ แดง หมายถึง ติดตั้งอย่าง Application ซึ่งปุ่มนี้จะแสดงผลขึ้นมาก็ต่อเมื่อ เว็บไซต์ที่เปิดอยู่ ออกแบบเขียนโค้ดเพื่อทำให้เว็บไ่ซต์มีคุณลักษณะอย่างแอป
    2. ถ้าเลือก ๓ เหลือง หมายถึง การสร้างปุ่มทางลัด เพื่อเปิดเว็บไซต์ซึ่งกำลังเปิดอยู่ด้วย เว็บเบราเซอร์ซึ่งกำลังใช้เปิดอยู่นี้ อาจเป็น Google Chrome, Microsofe Edge หรือ Mozilla FireFox ขึ้นอยู่กับ ผู้ใช้ กำกลังใช้โปรแกรมใด และ แน่นอนว่า สถานะออนไลน์-ออฟไลน์ย่อมมีผลต่อการคลิกเพื่อเปิดเว็บไซต์ที่กำลังเปิดอยู่เพื่อดูข้อมูลย้อนหลัง ออนไลน์+สัญญาณเน็ตใช้ได้และเสถียร ยังคงเปิดซ้ำในภายหลังได้ แต่ถ้า ออฟไลน์ ก็คือจบ-ไม่สามารถเปิดดูย้อนหลังได้อีกต่อไป

ใน IPhone (จากการตรวจสอบล่าสุด)

ปุ่ม B ไม่มีการแสดงผลด้วยการเด้งขึ้นมา ดังนั้น หากต้องการติดตั้งต้องติดตั้งด้วยตนเอง ดังนี้

  1. คลิกปุ่ม ๓ จุด และคลิก Share
  2. คลิกปุ่ม "More ๓ จุด" และเลื่อนเมนูลงไปเพื่อเลือกคลิก Add to Home Screen และก่อนคลิก ปุ่ม Add ที่เด้งขึ้นมา ตรวจสอบดูว่า Open as Web App ถูกเลือกไว้หรือไม่ (Default คือ ถูกเลือกไว้)

แชร์บทความนี้

Facebook Line X