Progressive Web Apps หรือ PWAs ใน Magento 2 คืออะไร

• หมายความว่า Magento กลายเป็นแพลตฟอร์มแอปพลิเคชันเว็บแบบก้าวหน้า
• โครงสร้างรหัสของ PWAs ใน Magento จะเป็นอย่างไร
• ข้อตกลงกับ REST API และ PWAs คืออะไร

เว็บแอพก้าวหน้าคืออะไร

• ดูเหมือนและทำงานเหมือนแอพมือถือ
• ใช้ประโยชน์ของโทรศัพท์มือถือพื้นเมืองคุณลักษณะของอุปกรณ์, โดยไม่ต้องมี ผู้ใช้ในการเยี่ยมชมร้านแอปทำการซื้อและดาวน์โหลดมัน ในประเทศ

ทำไมต้องกปภ.

• รวดเร็ว
• ปลอดภัย (หัวข้อสุดท้ายของคำตอบที่สอง)
• อ่อนไหว
• เข้ากันได้ข้ามเบราว์เซอร์
• โหมดออฟไลน์ (ตรวจสอบหัวข้อสุดท้ายในคำตอบ)
• มือถือ“ ติดตั้ง”
• เนื้อหาที่แชร์ได้

คำตอบนี้ยังครอบคลุมถึง - การติดตั้ง Magento 2.3 ด้วย PWA

ลองตัวอย่างของ Flipkart

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

Flipkart

เข้าใกล้

1. พัฒนา Flipkart Lite ซึ่งเป็น Progressive Web App
2. เพิ่มพนักงานบริการสำหรับเวลาโหลดที่รวดเร็วขึ้น
3. การนำทางและการเลื่อนที่ราบรื่น 60 เฟรม / วินาที
4. สร้างพรอมต์“ เพิ่มไปที่หน้าจอหลัก” เพื่อกระตุ้นให้ผู้ใช้เพิ่มหน้าเว็บมือถือในหน้าจอหลัก

   ---

ผล

ใหม่ Progressive Web App ช่วยให้การแปลงเพิ่ม Flipkart 70%

Flipkart ยังทำงานในโหมดออฟไลน์

• ผู้ให้บริการสามารถเขียนสคริปต์เพื่อดักจับการร้องขอเครือข่ายทุกครั้งและตอบสนองจากแคชแม้ว่าผู้ใช้จะออฟไลน์
• พนักงานบริการเสื้อคลุมห้องสมุดที่ช่วยให้ใช้รูปแบบที่เรียบง่ายเช่นNetworkFirst, หรือ CacheFirst จัดเตรียมแคชที่ใช้ในแอพ Flipkart สำหรับการจัดเก็บผลการค้นหาก่อนหน้าบนหน้าเรียกดูและหน้าผลิตภัณฑ์ที่เยี่ยมชมล่าสุดNetworkOnlySW-ToolboxLRU
• กล่องเครื่องมือยังมีกลไกการตรวจสอบความถูกต้องของTTL-based แคชที่เราใช้เพื่อกำจัดเนื้อหาที่ล้าสมัย Service Workers จัดเตรียมการสคริปต์พื้นฐานระดับต่ำที่ทำให้สิ่งนี้เป็นไปได้

แต่ ... แต่ ... แต่ ...

Magento PWA Studio คืออะไร

• •โครงการMagento PWA Studioเป็นชุดเครื่องมือสำหรับนักพัฒนาที่อนุญาตให้มีการพัฒนาปรับใช้และบำรุงรักษาหน้าร้าน PWA ที่อยู่ด้านบนของ Magento 2

โครงการ Magento PWA Studio มีเครื่องมือดังต่อไปนี้:

---

กปภ. โมดูล

• มันมีโมดูลเช่นผู้ช่วยการทำงานด้านเซิร์ฟเวอร์และทำหน้าที่เป็นพื้นฐานสำหรับทุกธีมที่สร้างขึ้นโดยใช้Magento PWA Studio

pwa-buildpack -

• Buildpack เป็นชุดของWebpackปลั๊กอินและเครื่องมือที่ใช้สำหรับการพัฒนาชุดรูปแบบ Magento PWA

• นอกจากนี้ยังใช้เพื่อตั้งค่าและกำหนดค่าสภาพแวดล้อมการพัฒนาท้องถิ่นสำหรับแพลตฟอร์ม Magento 2

มันมีเครื่องมือดังต่อไปนี้:

• PWADevServer
• Magento Resolver
• ปลั๊กอินคอมโพเนนต์ของรูทวีโอไอพี
• วีโอไอพีแบบการจัดวาง-loader
• ปลั๊กอินผู้ปฏิบัติงานบริการ

Peregrine - Peregrine เป็นชุดที่React componentsสร้างขึ้นเพื่อรองรับฟังก์ชันเฉพาะของ Magento เช่นrouting,,root-componentsตัวจัดการเลย์เอาต์, รายการผลิตภัณฑ์, การแสดงราคาเป็นต้น

ชุดรูปแบบ Venia -venia-conceptเป็นธีมตัวอย่างที่สร้างโดย Magento โดยใช้ Magento PWA studio มันแสดงให้เห็นถึงการทำงานทั้งหมดที่มีอยู่ในปัจจุบันเวิร์กโฟลว์และหน้า

PWA Studio ไม่ใช่

• Magento รุ่นใหม่

• การเปลี่ยนส่วนหน้าทั้งหมด

• แอปพลิเคชันเดสก์ท็อป

เครื่องมือและไลบรารีที่ใช้ใน PWA Studios

Webpack

• หน้าที่หลักของ Webpack คือการสร้างบันเดิลตั้งแต่หนึ่งชุดขึ้นไปจากการพึ่งพาในโมดูลของโครงการของคุณ

App Shell

• ขนาดโดยรวมเล็กกว่า
• โหลดครั้งแรกขอสามไฟล์: login.html, shell-1234.js,3456.js
• โหลดเริ่มต้นต้องโหลด: Shell + Router + content
• เชลล์สามารถมองเห็นได้เร็วกว่าวิธีของ Page Shell

หน้าเชลล์

• ขนาดรวมใหญ่กว่า (เช่นเนื้อหาแดชบอร์ดอยู่ใน dashboard-1234.js และ 4567.js)

• แอพใช้เวลานานกว่าจะพร้อมออฟไลน์

• โหลดเริ่มต้นร้องขอเพียงสองไฟล์: login.html,login-2345.js

• โหลดเริ่มต้นต้องโหลด: Shell + content

• shell + contentสามารถมองเห็นได้เร็วกว่าด้วยวิธีการต่างเชลล์

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

ReactJs

• ไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้

Redux

• ไลบรารี JavaScript ที่ใช้สำหรับการจัดการสถานะในเว็บแอปพลิเคชัน

GraphQL

• ภาษาแบบสอบถามข้อมูลในฝั่งไคลเอ็นต์และชั้นบริการบนฝั่งเซิร์ฟเวอร์

GraphQL ในวีโอไอพี

การพิสูจน์ตัวตนและ Schema

ลดจำนวนการค้นหา Front-end

แสดงผลเฟส

ความเข้ากันได้ของเบราว์เซอร์เดสก์ทอป

• ไม่รองรับ : IE, Safari

ความเข้ากันได้ของเบราว์เซอร์มือถือ

ไม่รองรับ : Android Webview, IE, Safari

PWAs มีความปลอดภัยมากกว่า

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

PWA - โหมดออฟไลน์

การประยุกต์ใช้แบบออฟไลน์วิกิพีเดียเป็นตัวอย่างที่ดีของกปภ.ที่ใช้รูปแบบเปลือกแอป

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

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

เริ่มต้นด้วยการติดตั้ง Magento 2.3 ด้วย PWA

1. ป้อนคำสั่งต่อไปนี้ใน DIR / var / www / html / (m203 เป็นไดเรกทอรี Magento 2.3 ของฉัน):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. ติดตั้ง Magento ด้วย Command Line:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. สร้างธีม pwa ฐานซึ่งจะเป็นพาเรนต์สำหรับธีม PWA Venia

• สำหรับตอนนี้ให้พื้นที่เก็บข้อมูลชุดรูปแบบโคลนฐาน pwa https://github.com/magento-research/theme-frontend-pwa

4. สร้างไดเรกทอรีapp/design/frontend/Magento/pwaและคัดลอกไฟล์และไดเรกทอรีทั้งหมดของชุดรูปแบบพื้นฐานที่นี่

• ให้ตรวจสอบชุดรูปแบบฐานใช้ได้หรือไม่

• Run: php bin/magento setup:upgrade

• และไปที่ Magento Admin-> Content-> Themes

5. ดาวน์โหลดโครงการ PWA studio

6. นำทางไปยังไดเรกทอรีรูทของการติดตั้ง Magento ของคุณและสร้างโฟลเดอร์ Pwa symlink ที่ลิงก์ไปยังไดเรกทอรีโมดูลของโครงการ (pwa-studio / packages / pwa-module)

• จากไดเรกทอรีนี้ฉันใช้คำสั่งของฉัน - / var / www / html / m230

• นี่คือไดเรกทอรีที่ pwa ที่ฉันดาวน์โหลดมาคือ/ var / www / html / PWA /

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. เชื่อมโยงไดเรกทอรีชุดรูปแบบด้วยไปที่ไดเรกทอรีรากของการติดตั้ง Magento ของคุณและสร้างโฟลเดอร์ Pwa symlink ที่ลิงก์ไปยังไดเรกทอรีโมดูลของโครงการ (pwa-studio / packages / venia-concept)

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. ตอนนี้ไปที่ไดเรกทอรี Venia-concept ของโครงการ pwa-studio ของคุณคัดลอก.env.distลงใน.envไฟล์ใหม่และอัพเดตตัวแปรด้วย URL ไปยัง Magento store store

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. ติดตั้งธีม venia และโมดูล Pwa:

run: php bin/magento setup:upgrade

เราสามารถเห็นชุดรูปแบบ venia ติดตั้งเรียบร้อยแล้ว

10. กำหนดค่าธีมของ venia จาก admin->Content->Configuration

11. นำทางไปยังเส้นทาง ( /var/www/html/PWA/pwa-studio-master) รัน:

npm install

หรือ

npm install webpack-dev-server -g

12. และในที่สุดก็ไปที่ /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

ขอแสดงความยินดี! คุณได้ตั้งค่าสภาพแวดล้อมการพัฒนาของคุณสำหรับโครงการธีม Venia

PWA - Progressive Web Application เป็นเว็บแอปพลิเคชั่นทั่วไปที่ผู้ใช้สัมผัสกับเว็บที่มีความสมบูรณ์ ในทาง:

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

"หมายความว่า Magento กลายเป็นแพลตฟอร์มแอปพลิเคชันเว็บแบบก้าวหน้า"

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

ข้อตกลงกับ REST API และ PWAs คืออะไร

ในขณะที่วีโอไอพีใช้ "PWA" มันยังเพิ่ม "GraphQL API" สำหรับการจัดหา front-end API ด้านการพัฒนาทางเลือกของ "REST / SOAP" เป็น "GraphQL" api

สำหรับการรับรายละเอียดเพิ่มเติมเกี่ยวกับ "กปภ." และคุณลักษณะใหม่ของ "magento2.3 เปิด-Commerce" คุณสามารถเยี่ยมชมเว็บอย่างเป็นทางการของวีโอไอพีนี้

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

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

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

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

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

คุณสามารถตรวจสอบโครงสร้างรหัสได้ที่https://github.com/magento-research/pwa-studio

Magento PWA ใช้GraphQLเป็นทางเลือกแทน REST API สำหรับ PWA

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ Magento PWA คุณสามารถเข้าไปที่ลิงค์ต่อไปนี้:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Progressive Web Apps เป็นจุดกึ่งกลางระหว่างแอพมือถือที่ติดตั้งได้และเว็บไซต์ เราคาดว่าจะเห็นการรับส่งข้อมูลบนอินเทอร์เน็ตจากอุปกรณ์พกพามากกว่าเดสก์ท็อปในปี 2019 PWAs ปรับปรุงรูปลักษณ์ของเว็บไซต์เพื่อเพิ่มการแปลง

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

ดังนั้นโดยทั่วไปวีโอไอพีจะเปลี่ยนรูปลักษณ์และความรู้สึกเพื่อเพิ่มการแปลง อ่านเพิ่มเติมได้ที่นี่

• โดยทั่วไปแล้ว PWAs จะสร้างด้วย JavaScript, CSS และ HTML ที่มีระดับของประสิทธิภาพและการใช้งานที่เกือบจะเหมือนกับแอพทั่วไป PWAs มีลักษณะเฉพาะรวมถึง:

  1. มันทำงานกับเบราว์เซอร์และอุปกรณ์ส่วนใหญ่ (ถ้าไม่ใช่ทั้งหมด) และอุปกรณ์ (มือถือและเดสก์ท็อป) ที่มี codebase แบบโปรเกรสซีฟ (มักจะเป็นส่วนประกอบเช่นใน React Js)
  2. จัดวางหน้าจอและปัจจัยรูปแบบทั้งหมดโดยใช้การออกแบบที่ตอบสนองใช้ประโยชน์จากพนักงานบริการเพื่อเปิดใช้งานการเชื่อมต่อออฟไลน์ (จำเป็นต้องใช้ HTTPS)
  3. มอบประสบการณ์ที่เหมือนกับแอปที่ใช้เครื่องมือการมีส่วนร่วมใหม่เช่นการแจ้งเตือนแบบพุช
  4. ใช้ประโยชน์จากรายการแอปพลิเคชันเว็บเพื่ออธิบายทรัพยากรที่ใช้

คุณสามารถอ่านเพิ่มเติมได้ที่นี่

• SOAP (Simple Object Access Protocol) และ REST (Representational State Transfer) เป็นโปรโตคอลการสื่อสารผ่านเว็บเซอร์วิสที่พบได้บ่อยที่สุด REST เป็นที่ต้องการของ SOAP เป็นส่วนใหญ่ ( อธิบายที่นี่ ) ดังนั้นจึงเป็นเหตุผลที่จะเห็น REST APIs ที่ใช้ควบคู่กับเทคโนโลยีใหม่เช่น PWAs

เพื่อตอบเพียงบางส่วนของคำถามของคุณ แต่เฉพาะเจาะจงมากกว่า Magento 2

PWA จะสร้างได้ง่ายขึ้นเนื่องจากการปล่อย Magento 2.3 ในอนาคต

https://www.degdigital.com/insights/magento-2-3/

อ้างอิงจากบทความนี้:

กปภ.

Progressive Web App เป็นแอปพลิเคชั่นที่สร้างขึ้นเพื่อใช้ประโยชน์จากคุณสมบัติเทคโนโลยีสมัยใหม่ที่“ ก้าวหน้า” ลดขนาดลงบนอุปกรณ์ที่ไม่มีคุณสมบัติเหล่านั้น นอกจากนี้ยังอนุญาตให้แคชข้อมูลเพื่อให้สามารถใช้เว็บไซต์ (บางส่วนหรือทั้งหมด) ในโหมดออฟไลน์เมื่อบริการอินเทอร์เน็ตขาด ๆ หาย ๆ หรือไม่มีอยู่จริง สิ่งนี้สามารถทำได้โดยการเขียนส่วนหน้าของเว็บไซต์ด้วยเฟรมเวิร์ก / สแต็ก JavaScript ที่ทันสมัยซึ่งแยกจากแอปพลิเคชันด้านหลังอย่างชัดเจน แอปพลิเคชัน JavaScript นี้สามารถใช้คุณลักษณะเบราว์เซอร์ใหม่ (ish) เพื่อให้งานดังกล่าวสำเร็จ

Magento ตระหนักถึงประโยชน์หลายประการนี้และในปลายปี 2017 ได้ประกาศความพยายามในการสร้างสิ่งที่เรียกว่า PWA Studio PWA Studio จะมีเครื่องมือในการพัฒนาและปรับใช้ PWA สำหรับส่วนหน้าของ Magento พร้อมกับ PWA Studio จะมีไซต์ตัวอย่าง (ไม่เต็มฟีเจอร์) ที่มีน้ำหนักเบา ผลประโยชน์ทันทีจะเป็นการเพิ่มขึ้นอย่างมากของประสิทธิภาพของ front-end และความเร็วที่เพิ่มขึ้นถึง 10 เท่าในการพัฒนานักพัฒนาหน้าใหม่ของ Magento

• เนื้อหาที่เกี่ยวข้อง: PWAs อยู่ที่นี่และพวกเขากำลังเปลี่ยนแปลงทุกอย่าง

GraphQL

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

ปัจจุบันวีโอไอพีรองรับคำขอ REST และ SOAP API ที่ใช้สัญญาบริการ อย่างไรก็ตามเพื่อรองรับ GraphQL วีโอไอพีกำลังเขียนเลเยอร์ใหม่ทั้งหมดที่เชื่อมต่อโดยตรงกับ Query API การใช้งาน GraphQL จะเป็นรากฐานของวิธีการที่ส่วนหน้าของ PWA จะดึงข้อมูลที่ต้องการ

Progressive Web Application ใช้ความสามารถของเว็บเบราว์เซอร์และมอบแอพมือถือเช่นประสบการณ์ให้กับผู้ใช้

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

ผู้ใช้สามารถเรียกใช้ Progressive Web Application เช่นเดียวกับแอปพลิเคชั่นพื้นฐานโดยไม่คำนึงถึงตัวเลือกเบราว์เซอร์

สำหรับการทดสอบตัวอย่างคุณสามารถเยี่ยมชมลิงค์นี้: คลิกที่นี่

เป็นผลิตภัณฑ์ของ Google ที่เปิดตัวในช่วง I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

มันเป็นเว็บไซต์ที่ใช้ HTML

มันเก็บแคชในอุปกรณ์เพื่อให้สามารถใช้งานออฟไลน์ได้เช่นกัน

อย่างไรก็ตามครั้งแรกมันช้าซึ่งจะเกิดขึ้นในระหว่างการเยี่ยมชมครั้งที่สอง

กำลังได้รับการอัปเดตเมื่ออุปกรณ์ได้รับอินเทอร์เน็ตดังนั้นจึงไม่จำเป็นต้องอัปเดตสิ่งใหม่ ๆ เช่นแอป

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

ในที่สุดไม่จำเป็นต้องสร้างแอพสำหรับ iPhone / Android

ข้อ จำกัด รองรับไฟล์ HTML เท่านั้น ดังนั้นอุปกรณ์ควรรองรับ HTML

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

ตั้งค่า PWA (Linux OS)

ขั้นตอนที่ 1: ติดตั้ง magento 2.3.1

ขั้นตอนที่ 2: ติดตั้ง / อัพเกรดโหนด

ใช้โมดูล n จาก npm เพื่ออัพเกรดโหนด

sudo npm install n -g

สำหรับเวอร์ชั่นเสถียรล่าสุด:

sudo n stable

สำหรับเวอร์ชั่นล่าสุด:

sudo n latest

ขั้นตอนที่ 3: ติดตั้ง / อัพเดทไหมพรม:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

ขั้นตอนที่ 4: ติดตั้งเครื่องมือสร้าง addon ดั้งเดิมของโหนด Node.js

sudo npm install -g node-gyp

ขั้นตอนที่ 5: โคลนที่เก็บ PWA Studio

ไปที่ html root และรัน:

git clone https://github.com/magento-research/pwa-studio.git

หลังจากเปิดใช้งานคุณจะได้รับโฟลเดอร์ pwa-studio

ขั้นตอนที่ 6: ติดตั้งการพึ่งพา PWA Studio

sudo yarn install

ขั้นตอนที่ 7: ระบุเซิร์ฟเวอร์แบ็กเอนด์ Magento

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

คำสั่งตัวอย่าง:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

การเปลี่ยนแปลงในไฟล์. env (นี่จะเป็น URL ของวีโอไอพีของคุณไม่ใช่ URL ของผู้ดูแลระบบ):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

ขั้นตอนที่ 8: ตอนนี้สร้างงานสร้าง

sudo yarn run build

ขั้นตอนที่ 9: เรียกใช้เซิร์ฟเวอร์

sudo yarn run watch:venia

เริ่มสภาพแวดล้อมการพัฒนาหน้าร้าน Venia เท่านั้น

sudo yarn run watch:all

ใช้งานประสบการณ์ผู้พัฒนา PWA Studio อย่างเต็มรูปแบบซึ่งรวมถึงการสร้างใหม่ hot Venia และ Buildpack / Peregrine Buildpack พร้อมกันพร้อมกัน

sudo yarn run build && yarn run stage:venia

สร้างบิวด์และรันสภาวะแวดล้อม staging ซึ่งใช้สินทรัพย์ที่ถูกบีบอัดมากขึ้นและสะท้อนถึงการผลิตอย่างใกล้ชิดยิ่งขึ้น

เมื่อคุณเรียกใช้คำสั่งข้างต้นคุณจะได้รับ virtul url ที่สร้างโดย PWA

หมายเหตุ: หากคุณเป็นผู้ใช้งาน rood ให้ใช้ sudo

ติดตาม Magento 2 officical dev docs:

https://devdocs.magento.com/guides/v2.3/pwa/