หมายเหตุ: เทคโนโลยี PWA และมาตรฐานของ Web Browser มีการอัปเดตอย่างต่อเนื่อง ฟีเจอร์หรือขั้นตอนการติดตั้งบางอย่างอาจแตกต่างกันไปตามเวอร์ชันของอุปกรณ์และซอฟต์แวร์ที่ท่านใช้งาน ณ ปัจจุบัน

PWA (Progressive Web App) คือเทคโนโลยีที่ผสานความสามารถของเว็บไซต์และแอปพลิเคชันบางอย่างเข้าด้วยกัน ทำให้ผู้ใช้สามารถใช้งานเว็บไซต์ บางอย่างได้เหมือนแอปบนมือถือ เว็บแอป หรือ Web Application ซึ่งถูก "สกัดดาวรุ่ง" อย่างต่อเนื่องมากว่า ๑๐ ปี แต่ยังคงมีองค์ประกอบที่ใช้งานได้ดี โดยไม่ต้องดาวน์โหลดอย่างแอปผ่าน 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) แต่ต้องมีการลงทุนและพัฒนาในส่วนนี้เพิ่มเติม ซึ่งใช้ทรัพยากรใกล้เคียงหรือเทียบเท่า Native Application

ทำไมต้องทำ PWA (PROGRESSIVE WEB APP)?

ต้นทุนต่ำกว่า NATIVE APP ไม่ต้องลงทุนเฉพาะสร้างแอปพัฒนาแอป สำหรับแต่ละระบบปฏิบัติการ อย่างเช่น iOS/Android หลักแสนหลักล้าน เว็บไซต์เว็บเดียวแต่มี Feature as App ก็ "โลดแล่นเอาอยู่" บนทุกแพลตฟอร์ม ทั้งที่มีอยู่ ณ ปัจจุบันและที่กำลังทยอย "แจ้งเกิด"

SEO ยังคงทำงานได้ดี ต่างจากแอป Native ที่ Google เก็บข้อมูลไม่ได้ ด้วยเหตุนี้ PROGRESSIVE WEB APP จึงเป็นได้ทั้งเว็บไซต์สร้างความน่าเชื่อถือให้แก่ธุรกิจองค์กร อีกทั้งเป็นเครื่องมือส่งเสริมการตลาดและช่วยขยายฐานลูกค้าจาก “การค้นหาใน Google” ด้วย "สองแรงบวก" ไปพร้อมกัน

APP-LIKE EXPERIENCE จากข้อมูลทั่วโลก ผู้ใช้ส่วนมากตอบสนองไปในทางบวกสำหรับประสบการณ์เปิดข้อมูลเว็บไซต์ เหมือนเปิดดูจากแอป ซึ่งความจริงแล้ว ชื่อ "PROGRESSIVE WEB APP" ก็บอกอยู่แล้วว่าคือ แอป เช่น Full Screen, การตอบสนองไว, ไอคอนแบรนด์บนหน้าจอ → สิ่งนี้สร้างความรู้สึกพรีเมียมโดยไม่ต้องลงทุนสูง

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

ขั้นตอนการติดตั้ง PWA (PROGRESSIVE WEB APP)

PWA ชื่อย่อเหมือน การประปานครหลวง แต่ไม่ใช่ การประปานครหลวง 😁

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

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

SAFARI บน iPhone

จากการตรวจสอบล่าสุด

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

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

ภาพ ติดตั้ง ผลลัพธ์ PROGRESSIVE WEB APP เวอร์ชันเต็ม

---

📹 วิดีโอสาธิตใช้งานจริง 🎥

✕