PWA คืออะไร รู้จักเทคโนโลยีอนาคตแห่ง Mobile App แบบเจาะลึก!

แม้ Web Application จะได้รับความนิยม จากการที่สามารถใช้งานได้โดยที่ไม่ต้องติดตั้งแอปพลิเคชันเข้าไปในเครื่อง แต่ในปัจจุบัน Progressive Web Application ก็ได้ถูกทีมงานของ Google พัฒนาขึ้นมาตามหลังมาด้วยสถิติการใช้งานของผู้ใช้งานที่ตัดสินใจ ไม่ติดตั้งแอปพลิเคชันที่มีมากยิ่งขึ้น ซึ่งตัวมันเองก็มีแนวโน้มที่จะช่วยเพิ่มประสิทธิภาพให้กับโทรศัพท์มือถือได้อีกด้วย

PWA คืออะไร เทคโนโลยีใหม่ที่ทำให้ Web Application ไปไกลกว่าเดิม

Progressive Web Application หรือเรียกกันสั้น ๆ ว่า PWA คือการพัฒนาเว็บไซต์ให้ใช้งานได้ง่าย และสร้างประโยชน์ได้คล้ายกับแอปพลิเคชัน ซึ่งดูแล้ว คอนเซ็ปต์ก็คงจะไม่หนีไปจาก Web Application สักเท่าไหร่ เพียงแต่ Progressive Web App นั้นจะเข้ามามีบทบาทใหม่ที่ไม่ใช่แค่ Web Application เชิงเครื่องมืออย่าง Canva หรือ Google Drive แต่จะเป็นการผสมผสานกับเว็บไซต์ทั่วไป ที่สามารถแปลงร่างตัวเองให้ใช้งานง่ายได้เหมือนกับแอปพลิเคชัน ยกตัวอย่างเช่น Aliexpress เว็บไซต์ Market Place ขนาดใหญ่ ที่สามารถตั้งค่า Add To Screen Home พร้อมเปิดขึ้นมาช็อปได้ง่าย ๆ ในเวลาที่ต้องการ

โดย Developer จากฝั่ง Google ที่สนับสนุนการพัฒนาคอนเซ็ปต์ของ Web Application ดั้งเดิม ได้กล่าวถึงหลักการของการพัฒนา Progress Web Application ว่าอยู่ภายใต้ของคอนเซ็ปต์หลักดังนี้

1. FAST – โหลดได้รวดเร็วตอบสนองผู้ใช้งานได้ดี

Users มากกว่า 50 เปอร์เซ็นต์ ออกจากหน้าเว็บทันที หากหน้าเว็บใช้เวลาแสดงผลนานกว่า 3 วินาที ซึ่งไอเดียการทำงาน PWA คือการเก็บ Cache ของ Browser ไว้ เมื่อมีการเรียกใช้งานอีกครั้ง Browser ก็จะเรียกข้อมูลจากที่ Cache ไว้มาแสดงผลในทันที ซึ่งการทำงานตรงส่วนนี้จะเร็วมาก เพราะไม่จำเป็นต้องขอข้อมูลมาจาก Server ซึ่งใช้เวลามากกว่า โดยความสามารถนี้ยังต่อยอดไปถึงจุดเด่นเรื่อง Reliable ของ PWA อีกด้วย

2. INTEGRATED – มีความใกล้เคียงกับ Native Application ทั้งด้านฟังก์ชันการใช้งาน และ การแสดงผล

แนวคิดของ PWA คือการพัฒนาให้เว็บที่มีลูกเล่นใกล้เคียงกับ Native Application มากที่สุด และสามารถทำงานร่วมกันได้อย่างลื่นไหลจน Users ไม่รู้สึกถึงความแตกต่างในการใช้งานเลย ยกตัวอย่างเช่น

- สามารถติดตั้งเว็บลงบนหน้าจอมือถือ และ สามารถเรียกใช้งานเว็บแบบเดียวกับที่เรียกใช้งานแอปพลิเคชันได้ ทำให้เหมือนการติดตั้งแอปพลิเคชันซึ่งกินพื้นที่น้อยกว่า โดยไม่จำเป็นต้องติดตั้งและอัปเดตผ่าน Store ของ Platform อีกด้วย

- เปิดเว็บแบบ Fullscreen โดยไม่มี Address Bar ของ Browser ได้

- ออกแบบ UX/UI โดยทำให้ UI ให้มีลูกเล่นเหมือนแอปพลิเคชัน เพิ่มความน่าใช้งาน และสร้าง UX ที่ยืดหยุ่นในการใช้งานได้

- สร้าง Push Notification หรือข้อความแจ้งเตือนได้ แม้ไม่ได้เปิดเว็บทิ้งไว้ตลอดเวลา

- สิ่งที่ทำได้ดีกว่าแอปพลิเคชัน คือการอัปเดตข้อมูลได้อย่าง Realtime ทันที โดยไม่ต้องรอกระบวนการจาก Store เพื่อทำการอัปเดตที่ใช้เวลานาน

- สามารถแชร์เนื้อหาบนโซเชียลมีเดีย ส่งอีเมล ส่งข้อความ ส่งโฆษณาออนไลน์ หรือเชื่อมโยงกับ QR Code เพื่อให้ใช้งานได้ทันที

- นักพัฒนาซอฟต์แวร์สามารถปรับแต่งฟีเจอร์อื่น ๆ อีกมากมายให้เว็บทำงานได้เช่นเดียวกับแอปพลิเคชันมากที่สุด

3. RELIABLE – มีความเสถียรสูง สามารถใช้งานได้แม้ อยู่ในสถานะ Offline

อีกหนึ่งจุดเด่นของ PWA ที่มีความเสถียรในการใช้งานสูง จากการเก็บ Cache ของ Browser นอกจากทำให้สามารถแสดงผลได้รวดเร็วแล้ว ยังสามารถทำงานได้แบบ Offline ได้ โดย PWA ออกแบบมาเพื่อให้เราสามารถเรียกใช้งานเว็บได้แม้จะไม่มีอินเทอร์เน็ตในขณะนั้น แทนที่จะขึ้นหน้า 404 Page not found ซึ่งการทำงานนี้มีประโยชน์ และสร้างประสบการณ์ที่ดีต่อ Users เป็นอย่างมาก ยกตัวอย่างเคสของ Google map เมื่อ Users ค้นหาเส้นทางไปยังจุดหมาย แต่สัญญาณอินเทอร์เน็ตหายระหว่างทาง เว็บไซต์ยังคงแสดงผลเส้นทางได้อยู่ ทำให้การใช้งานของ Users ไม่สะดุด

4. ENGAGING – รวมข้อดีของเว็บไซต์ และแอปพลิเคชันเพื่อสร้างประสบการณ์ใช้งานที่ดีขึ้นให้แก่ผู้ใช้งาน

ไอเดียของการพัฒนา PWA คือการวมจุดเด่น ๆ ของ เว็บไซต์และแอปพลิเคชันมารวมเข้าด้วยกัน จุดประสงค์คือการสร้างประการณ์ใช้งานที่ดีแก่ Users ไม่ว่าจะเป็นความสามารถ Push Notification ให้เจ้าของ PWA สามารถทำการ Re-Engage กับ Users ได้ และที่สำคัญไอเดีย PWA ยังเป็นการพัฒนาเว็บไซต์ นั่นแสดงว่า Platform ไหนก็สามารถใช้ Browse ในการเข้าถึงได้ และยิ่งกว่านั้น คือ PWA ยังมีความสามารถในการทำ SEO เพื่อ Drive Traffic เข้ามาใช้งานได้อีกด้วย

5. SECURE – มีความปลอดภัย เชื่อถือได้

PWA ใช้มาตราฐานความปลอดภัยเช่นเดียวกับเว็บไซต์ทั่วไปนั่นคือ HTTPS ซึ่งปัจจุบันเป็นมาตราฐานที่ต้องมีสำหรับการทำเว็บไซต์และมีความเชื่อถือได้อย่างแน่นอน

ในหลาย ๆ ครั้ง ทั้ง Web Application และ Progressive Web Application ถูกตั้งข้อสงสัยว่าทำไมถึงต้องพัฒนา และสร้างมันขึ้นมา ในเมื่อหากเราต้องการให้เว็บไซต์มีการใช้งานที่เหมือนกับแอปพลิเคชัน ทำไมไม่สร้างแอปพลิเคชันสำหรับเว็บไซต์นั้น ๆ ขึ้นมาเสียเลย

คำตอบของคำถามนี้คือ ผู้พัฒนาต้องการเน้นความสะดวกสบาย และให้ความสำคัญกับ User Journey เป็นหลัก เนื่องจากจริงอยู่ ที่เราสามารถสร้างแอปพลิเคชันขึ้นมาเลยหนึ่งตัวน่าจะง่ายกว่า แต่การใช้งานแอปพลิเคชันนั้น มีกระบวนที่ผู้ใช้งานหลาย ๆ คนอาจจะไม่เต็มใจทำสักเท่าไหร่ ทั้งในเรื่องของการดาวน์โหลด การอัปเดต และการยอมสละความจำเครื่องส่วนหนึ่งในการจัดเก็บแอปพลิเคชันเหล่านี้ 

เพราะฉะนั้น Progress Web Application และ Web Application ทั่วไปจึงเริ่มมีบทบาท และมีเป้าหมายในการพัฒนามากขึ้นเรื่อย ๆ

ความสามารถของ PWA คืออะไรบ้าง

- สามารถทำงานได้แบบ Offline แอปพลิเคชันต่างจากเว็บไซต์ตรงที่มันสามารถทำงานได้ ถึงจะไม่มีอินเทอร์เน็ตก็ตาม ทำให้ PWA ถูกออกแบบมาเพื่อให้เราสามารถเรียกใช้งานเว็บไซต์ได้ แม้จะไม่มีอินเทอร์เน็ตในขณะนั้น แทนที่จะขึ้นหน้า 404 นั่นเอง

- สามารถอัปเดตได้ทันทีเมื่อมือถือกลับมาออนไลน์ และเมื่อไหร่ก็ตามที่มือถือกลับมาออนไลน์อีกครั้ง เว็บไซต์ก็จะสามารถอัปเดตได้ทันที ถึงแม้จะปิดโปรแกรมหรือเว็บไซต์ไปแล้ว เนื่องจากตัวโปรแกรมทำงานในเบื้องหลัง

- สามารถวางไอคอนของเว็บไซต์ลงบนหน้าจอมือถือ และสามารถเรียกใช้งานเว็บไซต์ แบบเดียวกับที่เรียกใช้งานแอปพลิเคชันได้ เหมือนการติดตั้งแอปพลิเคชันโดยที่ไม่ต้องมีการติดตั้งอะไรเลย รวมถึงไม่จำเป็นต้องติดตั้งและอัปเดตผ่าน Store อีกด้วย

- สามารถเปิดเว็บแบบ Full screen โดยไม่มี Address Bar ได้เมื่อ User กดเข้ามาจากหน้า Homescreen คล้าย ๆ การเปิดแอปพลิเคชันตามปกติ แต่ในปัจจุบัน จะยังไม่รองรับบน Desktop

- สามารถใช้งาน Push Notification หรือข้อความแจ้งเตือนบนแอปพลิเคชันสำหรับโซเชียลมีเดียเด้งขึ้นมา เมื่อมีข้อความใหม่เข้า โดยที่ไม่จำเป็นต้องเปิดเว็บไซต์ทิ้งเอาไว้

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

Progressive Web Application ทำงานอย่างไร

รากฐานที่ Progressive Web Application สร้างขึ้นคือ “service workers” ไฟล์เหล่านี้เป็นไฟล์ JavaScript ที่ทำให้สามารถโหลดเนื้อหาที่แคชในเบื้องหลังได้ โดย JavaScript นี้ทำงานแบบออฟไลน์และไม่ต้องการการเชื่อมต่ออินเทอร์เน็ต ทำให้ความล่าช้าเมื่อเรียกหน้าอื่นถูกกำจัดไปเกือบหมด

ซึ่งขอบเขตของ service workers ไปไกลกว่านั้น เมื่อ Progressive Web Application อยู่ระหว่างการพัฒนา งานของ service workers จะถูกกำหนดและจัดเก็บเป็นสคริปต์ ทำให้สามารถกำหนดค่ากระบวนการทางโปรแกรมที่สมบูรณ์ ซึ่งขึ้นอยู่กับเหตุการณ์เฉพาะ และทริกเกอร์การดำเนินการที่กำหนดไว้ล่วงหน้า ด้วยวิธีนี้ ทำให้สามารถสร้าง PWA เพื่อโหลดเนื้อหาได้ก่อนที่จะมีการกดลิงก์

https://hocco.co/wp-content/uploads/2023/06/Progressive-Web-Application.jpg

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

ส่วนองค์ประกอบที่สำคัญที่สามของ PWA คือรายการ Web Application คือไฟล์ JSON ที่บันทึกไว้บนเซิร์ฟเวอร์ ไฟล์ Manifest นี้ทำให้ผู้ใช้สามารถบันทึก PWA ได้เมื่อมีการเรียก บนอุปกรณ์ของพวกเขา เหมือนแอปพลิเคชันที่มาพร้อมกับเครื่อง อันที่จริงแล้ว ไม่ใช่แอปพลิเคชันทั้งหมดที่ติดตั้ง เช่นเดียวกับแอปพลิเคชันที่มาพร้อมเครื่อง แต่เป็นเพียงพื้นฐานในรูปแบบของ Application Shell ด้วยรายการ Web Application ทำให้สามารถวางไอคอนสำหรับบันทึก PWA ไว้บนหน้าจอหลักได้ นอกจากนี้ยังทำให้สามารถกำหนดได้ว่าจะสามารถโหลดแอปพลิเคชันได้โดยไม่ต้องใช้เบราว์เซอร์ หรือในเบราว์เซอร์ที่พร้อมใช้งาน สคริปต์นี้ยังสามารถใช้เพื่อจัดการรูปลักษณ์ หรือฟังก์ชันของแอปพลิเคชันได้อีกด้วย และสุดท้ายนี้ ยังเป็นไปได้ที่จะเปิดใช้งานการแจ้งเตือนแบบพุชเพื่อส่งไปยังผู้ใช้ โดยให้ผู้ใช้ยอมรับความสามารถนี้เมื่อ “ติดตั้ง” แอปพลิเคชันนั่นเอง

สรุป

แม้ในปัจจุบัน ประเทศไทยจะยังไม่ให้ความสำคัญกับ Web Application และ PWA เท่าไหร่นัก แต่ด้วยกระแสของโลกที่กำลังมาแรงขึ้นเรื่อย ๆ ทำให้ในท้ายที่สุดแล้ว วันที่ Web Application และ PWA จะกลายมาเป็นที่นิยมในไทยก็ใช่ว่าจะเป็นเรื่องที่ไกลตัว การศึกษาเอาไว้ก่อนให้เข้าใจอย่างถ่องแท้จึงเป็นเรื่องที่ควรกระทำ เพื่อให้ตอนที่มันกลายมาเป็นที่นิยมในประเทศ เราจะได้สามารถนำมันมาใช้ และไปได้เร็วกว่าคนอื่น ๆ ที่พึ่งเริ่มศึกษาในตอนนั้นนั่นเอง

อ้างอิง

https://1stcraft.com/what-is-progressive-web-application/

https://blog.skooldio.com/what-is-progressive-web-apps/

https://zixzax.net/ทำเว็บไซต์-ออกแบบเว็บไซ/what-is-progressive-web-app/

https://timeff.medium.com/โอ้เย-progressive-web-app-มาลองแบบง่ายๆ-วันเดียวเสร็จ-b7a2be52ae5b

https://www.1001click.com/blog/what-is-progressive-web-application

https://www.goragod.com/knowledge/progressive_web_apps_pwa_คืออะไร.html