ประโยชน์ของแอปพลิเคชันหน้าเดียวและเว็บแอปแบบโปรเกรสซีฟ: การปรับปรุง CX

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

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

(ว้าว เยอะจัง)

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

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

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

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

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

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

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

คงจะดีไม่น้อยหากสามารถมอบประสบการณ์ที่เหมือนแอปผ่านเว็บเบราว์เซอร์เพื่อให้ความแตกต่างระหว่างแอปที่มาพร้อมเครื่องและเว็บไซต์กลายเป็นภาพเบลอ

นี่คือที่มาของ Single Page Applications (SPA) และ Progressive Web Apps (PWA)

แอปพลิเคชั่นหน้าเดียวคืออะไร?

SPA คือแอปพลิเคชันที่เขียนด้วย JavaScript ที่ทำงานในเว็บเบราว์เซอร์ และโดยทั่วไปไม่จำเป็นต้องรีเฟรชหน้าเพื่อแสดงข้อมูลใหม่

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

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

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

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

เราทุกคนใช้ SPA มาระยะหนึ่งแล้ว อาจไม่รู้ตัวด้วยซ้ำ Facebook, Gmail, Twitter, LinkedIn และ Instagram (และอีกมากมาย) ล้วนใช้ SPA แทนเว็บไซต์ของตน

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

ประโยชน์ของแอปพลิเคชันหน้าเดียว

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

สิ่งนี้ต้องการวิธีใหม่ในการออกแบบและคิด เนื่องจากกฎปกติใช้ไม่ได้อีกต่อไป แต่ประโยชน์ต่อประสบการณ์ของผู้ใช้อาจมีมหาศาล

โดยทั่วไป SPA จะโหลดเนื้อหาได้เร็วกว่าเว็บไซต์มาตรฐานมาก เนื่องจากทรัพยากรการนำเสนอ (HTML,CSS) ส่วนใหญ่โหลดเพียงครั้งเดียว การโต้ตอบกับแอปพลิเคชันต้องการเพียงการเรียกไปยังเซิร์ฟเวอร์ส่วนหลังเพื่อดึงข้อมูลจำนวนเล็กน้อย แทนที่จะเป็นหน้า HTML/CSS ที่มีรูปแบบสมบูรณ์ แอปพลิเคชันสามารถแสดงข้อมูลที่เปลี่ยนแปลงได้อย่างรวดเร็วโดยไม่ต้องโหลดหน้าซ้ำ

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

ข้อเสียของสปา

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

นอกจากนี้ยังเป็นปัญหาน้อยลงเมื่อเวลาผ่านไปเนื่องจากบอทของเครื่องมือค้นหามีการเปลี่ยนแปลงเพื่อรับมือกับ SPA Google เป็นหนึ่งในบริษัทที่สนับสนุนพวกเขา

SPA บางแห่งใช้เวลาในการโหลดเล็กน้อยในการเข้าชมครั้งแรก เนื่องจากกำลังโหลดแอปพลิเคชันและทรัพยากรการนำเสนอในการดูหน้าแรก

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

Progressive Web App คืออะไร?

กปภ. กำหนดได้ยากเล็กน้อย เนื่องจากไม่ใช่เทคโนโลยีเฉพาะ แต่เป็นวิธีการพัฒนาหรือชุดหลักการที่ร่วมกันทำให้เว็บไซต์หรือแอปพลิเคชัน PWA มากหรือน้อย

คำว่า กปปส. เดิมที่ Google เป็นผู้กำหนด ซึ่งสร้างรายการตรวจสอบเพื่อกำหนดสิ่งที่ทำให้ กปภ. เหนือสิ่งอื่นใด Google ได้กำหนดไว้ว่าการประปาส่วนภูมิภาคจะต้อง:

• ปลอดภัย – ให้บริการภายใต้ https
• ตอบสนอง - พอดีกับฟอร์มแฟกเตอร์ใด ๆ
• สามารถทำงานออฟไลน์ได้ – ใช้พนักงานบริการเพื่อแคชเพจ
• เร็ว – สามารถโหลดได้เร็วบนการเชื่อมต่อ 3G
• App-like – ใช้โหมด app-shell และออกแบบให้รู้สึกเหมือนเป็น app
• ติดตั้งได้ – ใช้ไฟล์ Manifest เพื่ออนุญาตให้เพิ่มแอปไปที่หน้าจอหลัก
• การมีส่วนร่วม – การใช้เครื่องมือต่างๆ เช่น การแจ้งเตือนแบบพุช
• โปรเกรสซีฟ – ใช้งานได้กับทุกบราวเซอร์แต่จะดีขึ้นเรื่อย ๆ ในบราวเซอร์สมัยใหม่

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

งงยัง?

ข้อดีของการประปาส่วนภูมิภาค

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

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

กปภ. ก็มีแนวโน้มที่จะเร็วมากเช่นกัน เนื่องจากนั่นเป็นหลักการสำคัญข้อหนึ่งในรายการตรวจสอบ

ระบบปฏิบัติการ Android ช่วยให้เบราว์เซอร์เข้าถึงฮาร์ดแวร์ของอุปกรณ์มือถือได้ ซึ่งช่วยให้สามารถทำสิ่งต่างๆ เช่น การแจ้งเตือนแบบพุชและการใช้การสแกน NFC ซึ่งสามารถปรับปรุง CX ได้จริงๆ

ข้อเสียของ กปภ.

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

ข้อเสียอีกประการหนึ่งคือการขาดคำจำกัดความที่ชัดเจนซึ่งสามารถเปิดกว้างสำหรับการตีความได้

SPAs และ PWAs คืออนาคตของการพัฒนาเว็บไซต์

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

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

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

ผู้ให้บริการซอฟต์แวร์หลายรายเช่น SAP และ IBM ลงทุนอย่างมากในการสร้าง SPA front end สำหรับแพลตฟอร์มอีคอมเมิร์ซของพวกเขา และฉันสงสัยว่าภายในไม่กี่ปี เว็บไซต์อีคอมเมิร์ซส่วนใหญ่จะถูกสร้างขึ้นด้วยวิธีนี้ โดยใช้กรอบงาน JavaScript เช่น Angular Vue หรือ React

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

ในช่วงเวลาที่ไม่แน่นอน อะไรทำให้ CX ยอดเยี่ยม เข้าร่วมผู้เชี่ยวชาญตามที่พวกเขาพูดคุยกัน