คู่มือฉบับสมบูรณ์ในการสร้าง Magento 2 PWA

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

ก่อนอื่น คุณจำเป็นต้องรู้เกี่ยวกับ Progressive Web App

แล้ว Progressive Web App คืออะไรกันแน่?

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

คุณสมบัติที่โดดเด่นบางประการของ Progressive Web App

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

การค้นพบได้และติดตั้งง่าย: PWA คือเว็บไซต์ที่มีความพิเศษบางอย่างที่สามารถค้นพบได้ผ่านเครื่องมือค้นหาทั่วไป เช่น Google หรือ Bing ดังนั้น ผู้ใช้จึงไม่จำเป็นต้องดาวน์โหลดอะไรจากร้านแอพ การติดตั้ง กปภ. ทำได้ง่ายมาก โดยจะติดตั้งอยู่เบื้องหลังในระหว่างการเยี่ยมชมครั้งแรก

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

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

ความปลอดภัย : ด้วยการใช้โปรโตคอล HTTPS ข้อมูลจะปลอดภัยเนื่องจากการเข้ารหัส ทำให้ยากต่อการสกัดกั้นและเปลี่ยนแปลง นอกจากนี้ ผู้ใช้มองว่า HTTPS เป็นการรับประกันความปลอดภัยและความน่าเชื่อถือของผู้เผยแพร่ และ Google ให้คะแนนเพิ่มเติมในการจัดอันดับการค้นหาสำหรับการใช้งาน

ความรู้สึกเหมือนแอป : แนวคิดทั้งหมดที่อยู่เบื้องหลังการประปาส่วนภูมิภาคคือการหาวิธีเชื่อมต่อประสบการณ์ที่ดีที่สุดกับประสบการณ์ที่เหมือนแอปที่มีลักษณะเปิดกว้างของเว็บ

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

ตอนนี้ Magento 2 คืออะไรและเหตุใดจึงเป็นที่นิยมมากขึ้น

อย่างที่คุณทราบ Magento เป็นแพลตฟอร์มอีคอมเมิร์ซแบบโอเพนซอร์สที่มีการจัดการคำสั่งซื้อ ระบบธุรกิจอัจฉริยะ และการจัดส่ง การรวมระบบ Magento ยอดนิยมรวมถึงไฟล์ ERP การเงิน และแอปพลิเคชันการชำระเงิน

ดังนั้นอะไรที่ทำให้ Magento 2 แตกต่างจาก Magento 1? คุณลักษณะใหม่ใดบ้างที่นำมาสู่ตาราง

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

Magento 1 ขาดคุณสมบัติที่คู่แข่งนำเสนอ เช่น การตอบสนองบนมือถือ นอกเหนือจากการมีช่วงการเรียนรู้ที่สูงและการชะลอตัวที่สำคัญ

ปัญหาเหล่านี้ได้รับการแก้ไขแล้วใน Magento 2 มีความแตกต่างที่สำคัญบางประการ:

• สำรองข้อมูลเวอร์ชัน PHP ล่าสุด ซึ่งอาจทำให้ไซต์ของคุณช้าลง
• รองรับ CSS3, HTML5 และ MySQL ทั้งหมด
• เวลาในการโหลดหน้าเว็บเร็วขึ้น (โดยเฉลี่ยเร็วกว่า 20%) เมื่อเทียบกับ Magento 1
• ไซต์นี้เหมาะกับอุปกรณ์เคลื่อนที่หรือไม่
• มีอินเทอร์เฟซผู้ดูแลระบบที่เป็นมิตรต่อผู้ใช้มากขึ้นสำหรับพนักงานที่ไม่ใช่ด้านเทคนิค
• ลดจำนวนขั้นตอนในกระบวนการเช็คเอาต์จากหกใน Magento 1 เป็นสองใน Magento 2

สิ่งสำคัญคือต้องเข้าใจว่า Magento 2 มาในสามรุ่นที่แตกต่างกัน

• Magento 2 Open Source (เดิมชื่อ Magento 2 Open Source): ทุกคนสามารถดาวน์โหลดผลิตภัณฑ์นี้ได้ฟรีจากเว็บไซต์ Magento หลังจากนั้น ผู้ใช้สามารถติดตั้ง Magento ได้ แต่จะต้องรับผิดชอบค่าใช้จ่ายในการโฮสต์ การสนับสนุน และการพัฒนาทั้งหมด
• Magento 2 Commerce (on-prem) — ตัวเลือกแบบพรีเมียมภายในองค์กรนี้มีคุณสมบัติและการสนับสนุนเพิ่มเติม เนื่องจากราคารายเดือนที่สูง มีเพียงบริษัทขนาดใหญ่เท่านั้นที่สามารถรับมันได้ (ค่าใช้จ่ายจะกล่าวถึงเพิ่มเติมด้านล่าง)
• Magento 2 Commerce Cloud – เวอร์ชันที่โฮสต์บนคลาวด์ของ Magento 2 Commerce มีความสามารถทั้งหมดของ Enterprise Edition ในสถานที่โดยไม่จำเป็นต้องโฮสต์ด้วยตนเอง

เหตุใดการใช้ PWA In Magento 2 จึงเป็นที่นิยมเมื่อเร็ว ๆ นี้?

ผู้บริโภค Magento ค่อนข้างสนใจในการรวม Progressive Web App โดยเฉพาะอย่างยิ่งตั้งแต่ Magento 2 PWA Studio ถือกำเนิดขึ้น มีเหตุผลบางประการในการเปลี่ยนเว็บไซต์ของคุณเป็น Magento 2 PWA ตามรายการด้านล่าง

ปรับปรุงประสบการณ์ผู้ใช้บนอุปกรณ์พกพา

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

ลดต้นทุนการพัฒนาและบำรุงรักษาเมื่อเทียบกับแอปที่มาพร้อมเครื่อง  

คุณจะต้องสร้างสองเวอร์ชันที่แตกต่างกันสำหรับแอปที่มาพร้อมเครื่อง (เวอร์ชันหนึ่งสำหรับ iOS และอีกเวอร์ชันสำหรับ Android) ส่งผลให้ใช้เวลาและความพยายามในการพัฒนาและบำรุงรักษาแอพเป็นสองเท่า อย่างไรก็ตาม จำเป็นต้องใช้ codebase เดียวเพื่อสร้าง PWA ที่สามารถทำงานได้บนทุกระบบปฏิบัติการ

อุปกรณ์ไม่เชื่อเรื่องพระเจ้า

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

ตำแหน่งสูงสุดใน Google SERP

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

เชื่อมโยงได้

นี่เป็นทรัพย์สินอื่นที่ กปภ. และเว็บไซต์มีเหมือนกัน สามารถเก็บข้อมูลและโหลดสถานะใหม่ได้ด้วยความพร้อมใช้งานของ Unified Resource Identifier (URI) ลูกค้าสามารถบันทึกลิงก์ไปยัง Magento 2 PWA ของคุณ แชร์ URL และแม้แต่โหลดหน้าเดิมที่บันทึกไว้ในแท็บซ้ำ แอปแบบโปรเกรสซีฟทำงานคล้ายกับเว็บไซต์ทั่วไปในสถานการณ์นี้

ไม่มีการอัปเดตด้านผู้ใช้

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

การทำงานแบบออฟไลน์

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

Magento 2 PWA เป็นโซลูชันที่ยอดเยี่ยมหากกลุ่มเป้าหมายของคุณอาศัยอยู่ในประเทศที่มีการเชื่อมต่ออินเทอร์เน็ตที่ไม่ดีหรือปานกลาง คุณลักษณะนี้ยังช่วยลดการละทิ้งแคตตาล็อกอย่างน้อย 35% เนื่องจากผู้ใช้สามารถช็อปปิ้งต่อภายในธุรกิจได้เมื่อออฟไลน์

การแจ้งเตือนแบบพุช

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

ความปลอดภัย

Magento 2 PWAs ค่อนข้างปลอดภัย โปรโตคอล HTTPS จะรับผิดชอบในการรักษาความปลอดภัยข้อมูลและการป้องกันจากคนกลาง นอกจากนี้ยังห้ามการดัดแปลงเนื้อหาและการซื้อของ

ไม่มีข้อกำหนดของ App Store

คุณไม่จำเป็นต้องปฏิบัติตามมาตรฐาน Google Play และ App Store ทั้งหมดด้วย Magento PWA หากแอปของคุณไม่ตรงตามข้อกำหนด อาจถูกแบนหรือลบออกจาก App Store นอกจากนี้ พวกเขาไม่ได้แจ้งล่วงหน้า ทำให้คุณมีโอกาสเพียงเล็กน้อยในการแก้ไขปัญหา

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

แล้วจะสร้าง Magento 2 PWA อย่างมีประสิทธิภาพได้อย่างไร?

มีสามตัวเลือกสำหรับการรวม Magento PWA เพื่อให้เจ้าของร้านค้า Magento พิจารณา:

ติดตั้ง Magento 2 PWA Extensions

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

ข้อดี: โมดูล Magento 2 PWA มีราคาไม่แพง (ตั้งแต่ 0.00 ถึง 150 เหรียญสหรัฐฯ) นอกจากนี้ การติดตั้งส่วนขยายเหล่านั้นบนไซต์ของคุณใช้เวลาเพียงไม่กี่ชั่วโมง

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

PWA ของคุณโดยใช้ Magento 2 PWA Studio

Magento 2.3 PWA Studio เปิดตัวเพื่อช่วยเราในการพัฒนา ปรับใช้ และบำรุงรักษาหน้าร้าน PWA สำหรับเว็บไซต์ Magento 2

ข้อดี: การพัฒนา PWA ของคุณตั้งแต่เริ่มต้นด้วย Magento 2 PWA Studio เป็นโซลูชันที่ละเอียดกว่าการใช้ส่วนขยาย Magento 2 PWA ที่มีอยู่ มันจะแทนที่หน้าร้าน Magento เก่าของคุณด้วยหน้าร้าน Progressive Web App (PWA) ที่เชื่อมต่อกับแบ็กเอนด์ของคุณผ่าน API

จุด ด้อย: Magento 2 PWA Studio นั้นเป็นชุดเครื่องมือที่จะช่วยคุณสร้าง PWA ยังมีอีกมากที่ต้องทำ พิจารณาหน้าร้าน Venia (สาธิต PWA Studio) ซึ่งง่ายมากและไม่มีคุณลักษณะเริ่มต้นของ Magento

แปลงเว็บไซต์ของคุณเป็น PWA โดยใช้ Magento 2 PWA Theme

ธีม Magento 2 PWA เป็นโซลูชันการรวม PWA ที่มีคุณลักษณะหลากหลายซึ่งสร้างขึ้นบน Magento 2.3 PWA Studio, ReactJS และ GraphQL ประกอบด้วยสองส่วน: หน้าร้าน PWA ขนาดใหญ่และ API ในตัวที่เชื่อมต่อหน้าร้านกับแบ็กเอนด์วีโอไอพี

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

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

ต้องจ่ายเท่าไหร่ในแต่ละเที่ยว?

ดังที่เราได้กล่าวไปแล้ว มีสามวิธีในการแปลงเว็บไซต์ Magento 2 เป็น PWA ซึ่งเกี่ยวข้องกับค่าใช้จ่ายที่แตกต่างกัน:

ส่วนขยาย Magento 2 PWA:  

คุณต้องซื้อโมดูล (สูงสุด 150 ดอลลาร์) และชำระค่าบริการติดตั้ง (หรือติดตั้งและกำหนดค่าส่วนขยายด้วยตนเอง)

Magento 2 กปภ. สตูดิโอ:

ในการสร้าง PWA ของคุณตั้งแต่เริ่มต้น คุณจะต้องจ้างนักพัฒนา PWA ที่มีความรู้กว้างขวางทั้งใน Magento 2 และ PWA การใช้เครื่องมือ Magento 2 PWA Studio การพัฒนาหน้าร้าน PWA และ API ใหม่อาจใช้เวลาถึง 6 เดือน คุณควรจัดสรรเงินจำนวนมากสำหรับการผสานรวมนี้

ธีม Magento 2 การประปาส่วนภูมิภาค:

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

บทสรุป

เราแนะนำคุณตลอดบทความนี้ด้วยความหวังว่า: คุณมีภาพรวมของ Magento 2 PWA และวิธีการสร้าง ด้วยคุณสมบัติที่น่าทึ่งมากมาย จึงคุ้มค่าที่จะเพิ่มประสิทธิภาพของร้านค้าออนไลน์ของคุณ ดังนั้นธุรกิจของคุณจึงสามารถตอบสนองความต้องการของลูกค้าและนำโอกาสมาพัฒนาในสภาพแวดล้อมอินเทอร์เน็ตได้มากขึ้น อย่างไรก็ตาม หากคุณยังสับสนเกี่ยวกับเทคโนโลยีนี้ Magesolution ยินดีที่จะเป็นพันธมิตรเพื่อช่วยเหลือธุรกิจของคุณ ด้วยประสบการณ์มากมายในด้านนี้ เราจึงมั่นใจที่จะให้บริการที่ดีที่สุด: Magento Progressive Web Application Development ดังนั้น หากคุณมีคำถามใดๆ โปรด ติดต่อเรา เพื่อขอข้อมูลเพิ่มเติม