Progressive Web App

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

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

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

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

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

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

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

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

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

นำสิ่งที่ดีที่สุดของทั้งสองโลก

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

เว็บ

  • ความสามารถในการลิงก์
  • เข้าถึงได้โดยค่าเริ่มต้น
  • แพร่หลาย
  • นำไปใช้ได้ง่าย
  • อัปเดตง่าย
  • ทุกคนเผยแพร่ได้

แอปแพลตฟอร์ม

  • ใช้งานแบบออฟไลน์ได้
  • ประสิทธิภาพสูง
  • การผสานรวมอุปกรณ์
  • ประสบการณ์แบบสแตนด์อโลน
  • ไอคอนติดตั้งแล้ว
  • สมบูรณ์และเชื่อถือได้

การนำไปใช้งานมีข้อดี

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

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

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, 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

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

ในโลกของอุปกรณ์แบบหลายปัจจัย การรู้ว่าอุปกรณ์เดสก์ท็อปคืออะไรกันแล้ว อย่างไรก็ตาม เบราว์เซอร์และร้านค้าเหล่านี้สามารถใช้งานร่วมกับการติดตั้ง 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
Safari (ตั้งแต่ iOS 11.3), AppStore (ตั้งแต่ iOS/iPadOS 14 โดยมีข้อจำกัดบางประการ), การกำหนดค่าอุปกรณ์เคลื่อนที่สำหรับการจัดจำหน่ายระดับองค์กร
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huaweiเบราว์เซอร์, 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 จะทำงานในเบราว์เซอร์ของอุปกรณ์ทุกเครื่องเสมอ โดยมีข้อจำกัดเฉพาะ ความสามารถในการทำงานบนอุปกรณ์ต่างๆ นี้ช่วยให้คุณสร้างเส้นทางการใช้งานหลายอุปกรณ์ โดยผู้ใช้สามารถเริ่มงานในอุปกรณ์เครื่องหนึ่งแล้วไปทำงานนั้นจนเสร็จในอุปกรณ์อีกเครื่องหนึ่ง โดยใช้ข้อมูลที่ซิงค์ในอุปกรณ์นั้นกับแอปที่ติดตั้งใช้งานเดียวกันได้

แหล่งข้อมูล