Progressive Web App

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

• แอปจะมีไอคอนในหน้าจอหลัก ตัวเปิดแอป แป้นวิ่ง หรือเมนูเริ่ม
• ซึ่งจะปรากฏขึ้นเมื่อคุณค้นหาแอปในอุปกรณ์
• โดยจะเปิดในหน้าต่างสแตนด์อโลนแยกจากอินเทอร์เฟซผู้ใช้ของเบราว์เซอร์โดยสิ้นเชิง
• สิทธิ์นี้เข้าถึงการผสานรวมระดับสูงขึ้นกับระบบปฏิบัติการ เช่น การจัดการ URL หรือการปรับแต่งแถบชื่อ
• ใช้งานแบบออฟไลน์ได้

แพลตฟอร์มเว็บ

เว็บคือแพลตฟอร์มที่น่าทึ่ง การที่รองรับอุปกรณ์และระบบปฏิบัติการต่างๆ รูปแบบการรักษาความปลอดภัยที่เน้นผู้ใช้เป็นหลัก และไม่มีบริษัทใดควบคุมข้อกำหนดหรือการใช้งาน ทำให้แพลตฟอร์มนี้เป็นแพลตฟอร์มที่มีประสิทธิภาพในการนำส่งซอฟต์แวร์

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

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

แอปเฉพาะแพลตฟอร์ม

แอปเฉพาะแพลตฟอร์มทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อปขึ้นชื่อเรื่องความสมบูรณ์และเชื่อถือได้ โดยไอคอนเหล่านี้จะปรากฏอยู่เสมอในหน้าจอหลัก แท่นชาร์จ และแถบงาน โดยจะใช้งานได้ไม่ว่าจะใช้การเชื่อมต่อเครือข่ายแบบใดและเปิดตัวในประสบการณ์แบบสแตนด์อโลนของตัวเองได้ โดยสามารถอ่านและเขียนไฟล์จากระบบไฟล์ในเครื่อง เข้าถึงฮาร์ดแวร์ที่เชื่อมต่อผ่าน USB, ซีเรียล หรือบลูทูธ และโต้ตอบกับข้อมูลที่จัดเก็บไว้ในอุปกรณ์ เช่น รายชื่อติดต่อและกิจกรรมในปฏิทิน ในแอปพลิเคชันเฉพาะแพลตฟอร์ม คุณสามารถถ่ายภาพ เล่นเพลงที่แสดงรายการบนหน้าจอหลัก หรือควบคุมการเล่นสื่อขณะอยู่ในแอปอื่นได้ แอปพลิเคชันเหล่านี้จะให้ความรู้สึกเหมือนเป็นส่วนหนึ่งของอุปกรณ์ที่เรียกใช้งาน

ปัญหาของแอปเฉพาะแพลตฟอร์มคือแอปดังกล่าวไม่เข้ากันได้กับแพลตฟอร์มและอุปกรณ์หลายอย่าง ดังนั้นการย้ายแอป Android ไปยัง iOS หรือ iOS ไปยัง Windows หรือ ChromeOS โดยไม่สร้างแอปใหม่ตั้งแต่ต้นนั้นไม่ใช่เรื่องง่าย

การนำสิ่งที่ดีที่สุดของทั้ง 2 โลกมารวมกัน

หากพิจารณาแอปแพลตฟอร์มและเว็บแอปในแง่ของความสามารถและการเข้าถึง แอปแพลตฟอร์มจะแสดงถึงความสามารถที่ดีที่สุด ส่วนเว็บแอปจะแสดงถึงการเข้าถึงที่ดีที่สุด Progressive Web App อยู่ตรงจุดตัดระหว่างความสามารถของแอปแพลตฟอร์มและการเข้าถึงของเว็บแอป Progressive Web App มีฟีเจอร์จากทั้ง 2 โลก

การยอมรับมีคุณค่า

Hulu ซึ่งเป็นบริการสตรีมมิงวิดีโอในสหรัฐอเมริกาได้สร้างประสบการณ์ Progressive Web App เพื่อแทนที่แอปบนเดสก์ท็อปที่มีรีวิวที่ไม่ดีจากผู้ใช้และมีการใช้งานที่ไม่ดี ตามที่แชร์ไว้ใน Google I/O 2019 นักพัฒนาแอปรายหนึ่งสามารถหาข้อมูลและติดตั้งใช้งานประสบการณ์นี้จากเว็บแอปพลิเคชันที่มีอยู่ได้ภายใน 2 สัปดาห์

ภายใน 5 เดือน ผู้ใช้แอปเดิม 96% ก็ได้นำ PWA มาใช้ โดยมีการกลับมาเข้าชมใหม่เพิ่มขึ้น 27% และการมีส่วนร่วมเพิ่มขึ้น 5.5% เนื่องจาก PWA อยู่ใน Launcher และบนแถบงาน ผู้ใช้จึงกลับไปยัง PWA ได้ง่ายกว่าการอยู่เช่นนั้นในแท็บ

JD.ID เป็นแพลตฟอร์มอีคอมเมิร์ซในอินโดนีเซียที่ให้บริการจัดส่งสําหรับผลิตภัณฑ์จํานวนมาก ต้องการขยายตัวตนบนโลกออนไลน์ด้วยการมุ่งเน้นประสิทธิภาพและประสบการณ์การใช้งานที่ดีแบบอิสระจากเครือข่ายสําหรับ PWA ประสบการณ์ที่ปรับปรุงแล้วนี้ ทำให้บริษัทเพิ่มอัตรา Conversion อุปกรณ์เคลื่อนที่โดยรวมได้ถึง 53%, 200% สำหรับผู้ใช้ที่ติดตั้ง และเพิ่มผู้ใช้ที่ใช้งานอยู่รายวันเพิ่มขึ้น 26%

Clipchamp เป็นโปรแกรมตัดต่อวิดีโอออนไลน์ในเบราว์เซอร์บนเดสก์ท็อปที่ช่วยให้ทุกคนบอกเล่าเรื่องราวที่ควรค่าแก่การแชร์ผ่านวิดีโอ พวกเขาพบว่า PWA ช่วยให้ผู้ใช้กลับมาใช้งานมากขึ้น 9% เมื่อเทียบกับผู้ใช้แอปบนเดสก์ท็อปมาตรฐาน และพบว่าการติดตั้ง PWA เพิ่มขึ้น 97% ทุกเดือนในช่วง 5 เดือนแรกหลังจากเปิดตัว

Gravit Designer ของ Corel Corporation เป็นเครื่องมือออกแบบเวกเตอร์ที่มีประสิทธิภาพบนเดสก์ท็อป ซึ่งให้บริการผู้ใช้ที่ใช้งานอยู่หลายหมื่นรายต่อวันที่ต้องการซอฟต์แวร์ภาพประกอบแบบเวกเตอร์ที่มีคุณภาพในราคาประหยัดและเข้าถึงได้ นับตั้งแต่เพิ่ม PWA เป็นตัวเลือกการติดตั้งสำหรับผู้ใช้ พบว่าผู้ใช้ PWA ใช้งานมากขึ้น 24%, PWA มีผู้ใช้ที่กลับมาใช้บริการมากขึ้น 31% และผู้ใช้ PWA มีแนวโน้มที่จะซื้อ Gravit Designer PRO มากกว่า 2.5 เท่าเมื่อเทียบกับแพลตฟอร์มและตัวเลือกการติดตั้งอื่นๆ

ตัวพลิกเกมสตรีมมิง

ตัวอย่างที่ยอดเยี่ยมของความสามารถของ Progressive Web App คืออุตสาหกรรมแพลตฟอร์มสตรีมมิง ซึ่งรวมถึงเกมบนระบบคลาวด์และการประมวลผลจากระยะไกล ตั้งแต่ปี 2021 ผู้ให้บริการเกมระบบคลาวด์ส่วนใหญ่ได้เปิดตัว Progressive Web App โดยคุณสามารถเล่นเกมคอนโซลได้จากอุปกรณ์ใดก็ได้และมีเพียงเบราว์เซอร์หรือการติดตั้ง PWA เช่น iPhone, Android, iPad, แล็ปท็อป, Mac หรือ PC Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now และ BlueStacks X นำเสนอโซลูชันเกมระบบคลาวด์ผ่านเบราว์เซอร์เป็น PWA ฟีเจอร์เหล่านี้มอบประสบการณ์การใช้งานที่ยอดเยี่ยมพร้อมประสิทธิภาพที่ใกล้เคียงกับการใช้งานบนอุปกรณ์ทุกแพลตฟอร์มด้วยเทคโนโลยีเว็บ เช่น WebRTC, WebAssembly และ GamePad API

ความท้าทาย

หลังจากที่ได้กล่าวถึงข้อดีในการใช้แพลตฟอร์มเว็บเพื่อเผยแพร่ PWA แล้ว คุณก็ควรทราบถึงปัญหาที่อาจพบด้วย

ความสามารถในการใช้งานร่วมกันข้ามเบราว์เซอร์

Apple เป็นบริษัทที่สำคัญยิ่งสำหรับโลกที่เต็มไปด้วยอุปกรณ์ที่หลากหลาย ซึ่งเป็นเจ้าของ iOS, iPadOS, macOS และ Safari แม้ว่า Apple จะไม่เคยใช้คำว่า PWA ในที่สาธารณะ แต่ก็ได้สนับสนุนเทคโนโลยีเหล่านี้เพื่อทำให้ PWA ติดตั้งและทำงานแบบออฟไลน์ได้มาตั้งแต่ปี 2018 ใน Safari สำหรับ iPhone และ iPad

อย่างไรก็ตาม การใช้งานข้อกำหนด PWA ของ Apple ขาดฟีเจอร์หลายอย่างที่เบราว์เซอร์อื่นๆ มี โดยเฉพาะเบราว์เซอร์ที่ทำงานด้วยเอ็นจิ้น Chromium

ตรงกลางยังมี Firefox และเครื่องยนต์ Gecko ที่มีการใช้งาน รวมถึงข้อกำหนด PWA เพิ่มเติมใน Android และความสามารถในการติดตั้งที่น้อยลงในเดสก์ท็อป

ข้อจำกัด ได้แก่ ไม่มี Push Notification, API การผสานรวม (เช่น Web Bluetooth หรือ WebNFC) และเทคนิคการโปรโมตการติดตั้งที่ช่วยให้ผู้ใช้ทราบว่าสามารถติดตั้งเว็บไซต์ปัจจุบันเพื่อรับประสบการณ์การใช้งานแอป นอกจากนี้ ยังมีข้อบกพร่องหลายประการเกี่ยวกับฟีเจอร์ที่ติดตั้งใช้งาน

เช่นเดียวกับการพัฒนาเว็บทั้งหมด การทดสอบประสบการณ์การใช้งานในทุกแพลตฟอร์มเป็นสิ่งจําเป็นเมื่อเผยแพร่ PWA และเมื่อมีการเปิดใช้เบราว์เซอร์หรือระบบปฏิบัติการเวอร์ชันใหม่ที่สำคัญ คุณควรระบุโซลูชันสำรองหรือประสบการณ์การใช้งานทางเลือกเสมอเมื่อฟีเจอร์ไม่พร้อมใช้งาน

การตระหนักรู้เกี่ยวกับ PWA

ในฐานะนักพัฒนา PWA คุณอาจพบปัญหาด้านความรับรู้ ทั้งในด้านธุรกิจและผู้ใช้ เจ้าของธุรกิจบางรายอาจไม่รู้จัก PWA หรือมีความเข้าใจผิดเกี่ยวกับความสามารถและข้อจํากัดของ Progressive Web App

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

ปัญหาในการติดตั้งจะพบได้บ่อยกว่าในบางแพลตฟอร์ม เช่น iOS และ iPadOS และบางครั้งนักออกแบบ UX จะใส่หน้าจอที่อธิบายวิธีติดตั้งแอปให้ผู้ใช้ทราบ

ความเข้ากันได้

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

แต่เมื่อพูดถึง PWA และความเข้ากันได้ โดยทั่วไป เราจะนึกถึงความสามารถในการก้าวข้ามขอบเขตของเบราว์เซอร์และบริบทออนไลน์เท่านั้น เช่น การติดตั้งไอคอนและการสนับสนุนแบบออฟไลน์

นอกจากการรองรับแพลตฟอร์มเว็บแบบคลาสสิกแล้ว มาดูกันว่าแอปรองรับฟังก์ชันพื้นฐานของแอป เช่น การติดตั้งไอคอนและความสามารถในการทำงานแบบออฟไลน์หรือไม่

97 _%

เบราว์เซอร์ที่พร้อมใช้งานแบบออฟไลน์

88 _%

ผู้ใช้เว็บติดตั้ง PWA ได้

ข้อมูลมาจาก StatCounter และ Can I Use

เดสก์ท็อปและแล็ปท็อป

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

Windows 10 และ 11

Google Chrome (ตั้งแต่เวอร์ชัน 73), Microsoft Edge (ตั้งแต่เวอร์ชัน 79), Microsoft Store

ChromeOS

เบราว์เซอร์ Chrome ในตัว (จากเวอร์ชัน 72), Play Store (จากเวอร์ชัน 85)

macOS, Linux และ Windows 7 และ 8.x

Google Chrome (จากเวอร์ชัน 73), Microsoft Edge

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

อุปกรณ์เคลื่อนที่

สำหรับโทรศัพท์มือถือและแท็บเล็ต คุณสามารถติดตั้ง Progressive Web App ที่มีความสามารถในการทํางานแบบออฟไลน์ได้โดยใช้เบราว์เซอร์และ App Store ต่อไปนี้

iOS และ iPadOS

เบราว์เซอร์ของบุคคลที่สาม (ตั้งแต่ iOS/iPadOS 16.4), Safari (ตั้งแต่ iOS 11.3), AppStore (ตั้งแต่ iOS/iPadOS 14 โดยมีข้อจำกัดบางอย่าง), การกําหนดค่าอุปกรณ์เคลื่อนที่สําหรับการจัดจําหน่ายขององค์กร

Android

Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (จากเวอร์ชัน 72 ที่มีการติดตั้ง Google Chrome หรือเบราว์เซอร์ที่เข้ากันได้กับ TWA), Galaxy Store, เฟรม iframe ของ Managed Play สำหรับการจัดจำหน่ายระดับองค์กร

ในวิดีโอต่อไปนี้ ผู้ใช้จะติดตั้ง PWA จากเบราว์เซอร์ในอุปกรณ์เคลื่อนที่โดยใช้กล่องโต้ตอบของเบราว์เซอร์ รวมถึงใช้เมนูเพิ่มลงในหน้าจอหลัก

อุปกรณ์อื่นๆ

อุปกรณ์ขนาดเล็กอื่นๆ บางรุ่นรองรับ PWA เช่น คอนโซลเกม (Xbox ที่มี Microsoft Store) หรืออุปกรณ์ XR (Microsoft Hololens, แผนสำหรับ Oculus ของ Facebook) อย่างไรก็ตาม อุปกรณ์อื่นๆ ที่มีเบราว์เซอร์มักจะไม่รองรับ PWA ซึ่งรวมถึงอุปกรณ์ต่อไปนี้

• คอนโซลเกม
• สมาร์ททีวี
• สมาร์ทวอทช์
• รถยนต์

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

แหล่งข้อมูล

• ข้อมูลเบื้องต้นเกี่ยวกับ Progressive Web App ใน MDN
• รายการความเข้ากันได้ของ Progressive Web App
• Progressive Web App ช่วยให้ธุรกิจประสบความสำเร็จได้อย่างไร
• การติดตั้ง PWA ของโปรแกรมตัดต่อวิดีโอ Clipchamp เพิ่มขึ้น 97% ทุกเดือน
• ผู้ใช้ PWA มีแนวโน้มที่จะซื้อ Gravit Designer PRO มากกว่าผู้ใช้เว็บ 2.5 เท่า