Ứng dụng web lũy tiến hoặc PWAs trong Magento 2 là gì?

• Điều đó có nghĩa là Magento đang trở thành một nền tảng Ứng dụng Web Tiến bộ?
• Cấu trúc mã của PWAs trong Magento sẽ là gì?
• Thỏa thuận với API REST và PWAs là gì?

Ứng dụng web lũy tiến là gì?

• Nhìn và hoạt động như một ứng dụng di động.
• Hãy lợi thế của điện thoại di động có nguồn gốc tính năng thiết bị, mà không đòi hỏi người dùng cuối đến thăm một cửa hàng ứng dụng, thực hiện mua và tải nó tại địa phương .

Tại sao lại là PWA?

• Nhanh
• An toàn (chủ đề cuối cùng của câu trả lời)
• Đáp ứng
• Tương thích trình duyệt chéo
• Chế độ ngoại tuyến (Kiểm tra chủ đề cuối cùng trong câu trả lời)
• Cài đặt di động
• Nội dung có thể chia sẻ

Câu trả lời này cũng bao gồm - Cài đặt Magento 2.3 với PWA

Hãy lấy một ví dụ về Flipkart

Flipkart , trang thương mại điện tử lớn nhất Ấn Độ, đã quyết định kết hợp sự hiện diện web và ứng dụng gốc của họ vào Ứng dụng web lũy tiến dẫn đến tăng 70% chuyển đổi

Flipkart

Tiếp cận

1. Phát triển Flipkart Lite, một ứng dụng web tiến bộ
2. Đã thêm nhân viên phục vụ cho thời gian tải nhanh hơn
3. Điều hướng mượt mà và cuộn với tốc độ 60 khung hình / giây
4. Tạo một nhắc nhở Thêm vào màn hình chính để khuyến khích người dùng thêm trang web di động vào màn hình chính của họ

   ---

Các kết quả

Ứng dụng web tiến bộ mới giúp Flipkart tăng cường chuyển đổi 70%

Flipkart cũng hoạt động trên chế độ Ngoại tuyến

• Nhân viên dịch vụ có thể được viết kịch bản để chặn mọi yêu cầu mạng và cung cấp phản hồi từ bộ đệm ngay cả khi người dùng ngoại tuyến.
• Thư viện trình bao bọc Công nhân Dịch vụ cho phép sử dụng các mẫu đơn giản như NetworkFirst, CacheFirsthoặc NetworkOnly. SW-Toolboxcung cấp LRU bộ đệm được sử dụng trong ứng dụng Flipkart để lưu trữ kết quả tìm kiếm trước đó trên trang duyệt và vài trang sản phẩm được truy cập gần đây nhất.
• Hộp công cụ cũng có cơ chế vô hiệu hóa TTL-based bộ đệm mà chúng tôi sử dụng để xóa nội dung ngày. Nhân viên phục vụ cung cấp các nguyên hàm có thể viết kịch bản ở mức độ thấp để thực hiện điều này.

NHƯNG NHƯNG NHƯNG...

Magento PWA Studio là gì?

• • Dự án Magento PWA Studio là một bộ công cụ dành cho nhà phát triển cho phép phát triển, triển khai và bảo trì cửa hàng PWA trên đỉnh Magento 2

Dự án Magento PWA Studio cung cấp các công cụ sau:

---

mô-đun pwa

• Nó có các mô-đun như người trợ giúp, chức năng phía máy chủ và hoạt động như một nền tảng cho tất cả các chủ đề được tạo bằng Magento PWA Studio.

pwa-buildpack -

• Buildpack là một tập hợp các Webpackplugin và công cụ được sử dụng để phát triển các chủ đề Magento PWA.

• Nó cũng được sử dụng để thiết lập và cấu hình môi trường phát triển cục bộ cho nền tảng Magento 2.

Nó chứa các công cụ sau:

• Máy chủ PWADev
• Bộ giải quyết Magento
• Plugin thành phần gốc Magento
• magento-layout-loader
• Plugin công nhân dịch vụ

Peregrine - Peregrine là một bộReact componentsđược tạo để xử lý các chức năng dành riêng cho Magento nhưrouting,root-componentstrình xử lý bố cục, danh sách sản phẩm, hiển thị giá, v.v.

Chủ đề Venia -venia-conceptlà một chủ đề demo được tạo bởi Magento bằng cách sử dụng studio Magento PWA. Nó hiển thị tất cả các chức năng, quy trình làm việc và các trang hiện có

PWA Studio KHÔNG

• Một phiên bản mới của Magento

• Một thay thế của tất cả các front-end

• Một ứng dụng máy tính để bàn

Công cụ & Thư viện được sử dụng trong PWA Studios

Gói web

• Chức năng chính của Webpack là tạo một hoặc nhiều gói từ các phụ thuộc trong các mô-đun dự án của bạn.

Ứng dụng Shell

• Tổng kích thước nhỏ hơn
• Tải ban đầu yêu cầu ba tác phẩm: login.html, shell-1234.js,3456.js
• Tải ban đầu cần tải: Shell + Router + content
• Shell có thể nhìn thấy sớm hơn so với cách tiếp cận Page Shell.

Trang Shell

• Tổng kích thước lớn hơn (tức là nội dung bảng điều khiển nằm trong bảng điều khiển-1234.js và 4567.js)

• Ứng dụng mất nhiều thời gian hơn để sẵn sàng ngoại tuyến.

• Tải ban đầu yêu cầu chỉ có hai tập tin: login.html,login-2345.js

• Tải ban đầu cần tải: Shell + content

• Có shell + contentthể nhìn thấy sớm hơn so với phương pháp tiếp cận App Shell.

Một cách tiếp cận lai có thể được sử dụng khi tách vỏ và nội dung trong hai yêu cầu (xem trang quản trị làm ví dụ). Điều này có ý nghĩa khi nội dung lớn hơn nhiều so với shell và shell nên được nhìn thấy sớm hơn.

ReactJs

• Một thư viện JavaScript để xây dựng giao diện người dùng.

Redux

• Một thư viện JavaScript được sử dụng để quản lý trạng thái trong một ứng dụng web.

Biểu đồ

• Một ngôn ngữ truy vấn dữ liệu ở phía máy khách và một lớp dịch vụ ở phía máy chủ.

Đồ thị trong Magento

Xác thực và lược đồ

Giảm số lượng truy vấn Front-end

Pha kết xuất

Tương thích trình duyệt máy tính để bàn

• Không được hỗ trợ : IE, Safari

Tương thích trình duyệt di động

Không được hỗ trợ : Android Webview, IE, Safari

PWAs an toàn hơn

• Là một nhà phát triển web, bạn có thể biết Google khuyến khích các trang web có bao nhiêu httpsthay vì HTTP. Các mối đe dọa mạng luôn đứng đầu danh sách cho các nhà phát triển ứng dụng và web.
• Trước đây, HTTPkhông đủ an toàn để bảo vệ thông tin của người dùng.
• Các trang web hiện đang được lập trình HTTPsvà thật dễ dàng để khởi chạy Ứng dụng web lũy tiến trong một môi trường an toàn.
• Trong khi nhập thông tin cá nhân vào PWA như thông tin thẻ tín dụng hoặc chi tiết liên lạc, họ có thể an tâm và yên tâm.

PWA - Chế độ ngoại tuyến

ứng dụng Wikipedia ngoại tuyến là một ví dụ điển hình về PWA sử dụng mô hình vỏ ứng dụng .

• Nó tải ngay lập tức khi truy cập lặp lại, nhưng tự động tìm nạp nội dung bằng cách sử dụng JS.
• Nội dung này sau đó được lưu trữ ngoại tuyến cho các lần truy cập trong tương lai.

Ứng dụng Web lũy tiến là tương lai của phát triển web mà không có nghi ngờ gì. Trong tương lai, các trang web thương mại điện tử, nhà hàng và các nguồn phương tiện sẽ chuyển từ ứng dụng gốc sang Ứng dụng web lũy tiến. Tuy nhiên, vẫn trong giai đoạn đầu, nhiều nhà phát triển sẽ tích cực tìm cách để tận dụng tối đa các cơ hội do PWAs đưa ra.

Hãy bắt đầu với cài đặt Magento 2.3 với PWA

1. Nhập lệnh sau vào DIR / var / www / html / (m203 là thư mục Magento 2.3 của tôi):

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

2. Cài đặt Magento theo dòng lệnh:

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. Tạo chủ đề pwa cơ bản sẽ là chủ đề chính cho chủ đề PWA Venia.

• Để bây giờ cho phép kho lưu trữ chủ đề pwa cơ sở. https://github.com/magento-research/theme-frontend-pwa

4. Tạo thư mục app/design/frontend/Magento/pwavà sao chép tất cả các tập tin và thư mục của chủ đề cơ sở ở đây.

• Cho phép kiểm tra chủ đề cơ sở có sẵn hay không.

• Run: php bin/magento setup:upgrade

• Và điều hướng đến Quản trị viên Magento của bạn-> Nội dung-> Chủ đề

5. Tải về dự án studio PWA.

6. Điều hướng đến thư mục gốc của cài đặt Magento của bạn và tạo thư mục liên kết tượng trưng Pwa liên kết đến thư mục mô-đun của dự án (pwa-studio / gói / pwa-mô-đun).

• từ thư mục này tôi đã chạy lệnh của mình - / var / www / html / m230

• Đây là thư mục chứa nguồn tải xuống pwa của tôi là / var / www / html / PWA /

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

7. Liên kết thư mục chủ đề. Định hướng đến thư mục gốc của cài đặt Magento của bạn và tạo thư mục liên kết tượng trưng Pwa liên kết đến thư mục mô-đun của dự án (pwa-studio / gói / venia-concept).

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

8. Bây giờ điều hướng đến thư mục khái niệm venia của dự án pwa-studio của bạn, sao chép .env.distvào một .envtệp mới và cập nhật các biến với URL vào cửa hàng phát triển Magento của bạn.

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

cp .env.dist .env

9. Cài đặt chủ đề venia và Mô-đun Pwa:

run: php bin/magento setup:upgrade

chúng ta có thể thấy chủ đề venia được cài đặt thành công.

10. Cấu hình chủ đề venia từ admin->Content->Configuration

11. Điều hướng đến đường dẫn ( /var/www/html/PWA/pwa-studio-master) chạy:

npm install

hoặc là

npm install webpack-dev-server -g

12. Và cuối cùng điều hướng đến /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Xin chúc mừng! Bạn đã thiết lập môi trường phát triển của mình cho dự án chủ đề Venia.

PWA - Ứng dụng web lũy tiến là ứng dụng web nói chung là người dùng trải nghiệm web phong phú. theo cách:

• Đáng tin cậy - tải ngay lập tức và cũng có sẵn trong chế độ ngoại tuyến.
• Nhanh chóng - theo cách tương tác trong đó người dùng tương tác trơn tru với nó, và cũng không có bất kỳ cuộn giấy hoạt hình hay hoạt hình nào.
• Tham gia - như được biểu thị ở trên cả hai điểm nếu ứng dụng đáng tin cậy & nhanh thì rõ ràng nó thu hút nhiều trải nghiệm người dùng hơn và cũng cảm thấy như đó là ứng dụng tự nhiên.

"Điều đó có nghĩa là Magento đang trở thành một nền tảng Ứng dụng Web Tiến bộ?"

Vì magento đang chuẩn bị phát hành phiên bản 2.3, nên nó bao gồm tính năng "PWA" này để giúp frontend hiệu quả hơn, theo cách tương tác của người dùng.

Thỏa thuận với API REST và PWAs là gì?

Vì magento đang sử dụng "PWA", nên nó cũng đang thêm "API GraphQL" để cung cấp thay thế api phía phát triển phía trước của "REST / SOAP" thành api "GraphQL".

Để biết thêm chi tiết về "PWA" và tính năng mới của "magento2.3 thương mại mở" Bạn có thể truy cập trang chính thức của magento này .

Tiến bộ có nghĩa là ứng dụng tải cùng với bất kỳ dữ liệu và tài sản có liên quan nào, khi người dùng điều hướng xung quanh trang web của bạn. Điều này dẫn đến trải nghiệm người dùng cuối với tốc độ, khả năng sử dụng, hoạt động ngoại tuyến và tích hợp thiết bị tốt hơn.

Web có nghĩa là nó được viết bằng các ngôn ngữ của web (HTML, CSS, JavaScript). Điều này cho phép bạn tạo một trang web cung cấp nhiều chức năng giống như ứng dụng hơn mà không cần tạo một ứng dụng gốc bị giới hạn trong một nền tảng, chẳng hạn như iOS hoặc Android.

Ứng dụng có nghĩa là nó cài đặt và chạy mã trên thiết bị hoặc máy tính của người mua hàng. Làm điều này tạo ra nhiều tốc độ và khả năng hơn các ứng dụng JavaScript một trang trước đây.

PWAs về cơ bản là sự kết hợp của các trang web thông thường và ứng dụng di động, cho phép trải nghiệm giống như ứng dụng di động cho web.

Magento đang trở thành một nền tảng Ứng dụng Web lũy tiến. Điều đó có nghĩa là, Magento đang tạo ra một bộ công cụ để xây dựng các cửa hàng trực tuyến dưới dạng Ứng dụng Web lũy tiến. Những công cụ này sẽ giúp các nhà phát triển tìm hiểu các kỹ thuật PWA, xây dựng các mặt trận PWA nhanh như chớp và tạo các thành phần và tiện ích mở rộng PWA để tái sử dụng hoặc bán trên Thị trường Magento. Được kết hợp với nhau, Magento đang gọi bộ công cụ này là Magento PWA Studio.

Bạn có thể kiểm tra cấu trúc mã tại https://github.com/magento-research/pwa-studio

Magento PWA đang sử dụng GraphQL thay thế cho API REST cho PWA.

Để biết thêm chi tiết về Magento PWA, bạn có thể đi qua các liên kết sau:

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

• Ứng dụng web lũy tiến là nền tảng trung gian giữa các ứng dụng và trang web di động có thể cài đặt. Chúng tôi hy vọng sẽ thấy lưu lượng truy cập trên internet từ thiết bị di động nhiều hơn từ máy tính để bàn, vào năm 2019. PWAs cải thiện giao diện của các trang web để tăng chuyển đổi.

PWAs cung cấp các trải nghiệm nhanh, không ma sát, ứng dụng giống như ứng dụng trực tuyến, thúc đẩy lưu lượng truy cập nhiều hơn, chuyển đổi cao hơn và thời gian tải trang nhanh hơn cho các thương gia Magento

Vì vậy, nói chung, Magento đang thay đổi giao diện của nó để tăng chuyển đổi. Đọc thêm về nó ở đây .

• PWAs thường được xây dựng bằng JavaScript, CSS và HTML có mức hiệu suất và khả năng sử dụng gần giống với các ứng dụng gốc. PWAs có đặc thù bao gồm:

  1. Chúng hoạt động với hầu hết (nếu không phải tất cả) trình duyệt và thiết bị (di động và máy tính để bàn) với một cơ sở mã tiến bộ (thường là thành phần dựa trên như trong React Js)
  2. Điều chỉnh tất cả các màn hình và các yếu tố hình thức bằng cách sử dụng thiết kế đáp ứng Nhân viên dịch vụ tận dụng để cho phép kết nối ngoại tuyến (yêu cầu HTTPS)
  3. Cung cấp trải nghiệm giống như ứng dụng tận dụng các công cụ tương tác lại, chẳng hạn như thông báo đẩy
  4. Tận dụng bảng kê khai ứng dụng web để mô tả các tài nguyên đã sử dụng

Bạn có thể đọc thêm ở đây.

• SOAP (Giao thức truy cập đối tượng đơn giản) và REST (Chuyển giao trạng thái đại diện) là các giao thức truyền thông dịch vụ web phổ biến nhất. REST được ưu tiên SOAP cho hầu hết các phần ( giải thích ở đây ). Do đó, rất hợp lý khi thấy các API REST được sử dụng cùng với một công nghệ mới như PWAs.

Để chỉ trả lời một phần câu hỏi của bạn nhưng cụ thể hơn là Magento 2.

PWA sẽ dễ dàng xây dựng hơn nhờ phát hành Magento 2.3 trong tương lai.

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

Trích dẫn từ bài viết này:

PWA

Ứng dụng Web lũy tiến là một ứng dụng được xây dựng để tận dụng các tính năng công nghệ hiện đại, mà dần dần, quy mô của Google trở lại trên các thiết bị không có sẵn các tính năng đó. Nó cũng cho phép lưu trữ dữ liệu vào bộ đệm để trang web có thể được sử dụng (một phần hoặc toàn bộ) trong chế độ ngoại tuyến khi dịch vụ internet không chính xác hoặc không tồn tại. Điều này thường được thực hiện bằng cách viết phần đầu của trang web với khung / ngăn xếp JavaScript hiện đại tách biệt với ứng dụng back-end. Ứng dụng JavaScript này có thể sử dụng các tính năng trình duyệt (ish) mới để thực hiện tác vụ nói trên.

Magento nhận ra nhiều lợi ích cho việc này và vào cuối năm 2017 đã công bố những nỗ lực của mình trong việc xây dựng cái mà nó gọi là Studio PWA. PWA Studio sẽ chứa các công cụ để phát triển và triển khai PWA cho giao diện người dùng của Magento. Cùng với PWA Studio sẽ có một trang web demo nhẹ (không đầy đủ tính năng). Những lợi ích trước mắt sẽ là sự gia tăng lớn về hiệu suất của front-end và tăng gần 10 lần về tốc độ đưa lên các nhà phát triển front-end Magento mới.

• Nội dung liên quan: PWAs đang ở đây và họ đang thay đổi mọi thứ

Biểu đồ

GraphQL là ngôn ngữ truy vấn để sử dụng API. Với sự gia tăng của PWA, cần phải có được lượng dữ liệu nhỏ hơn và thực hiện ít yêu cầu API hơn. Ngôn ngữ truy vấn của GraphQL làm cho điều này trở nên khả thi bằng cách cho phép người yêu cầu yêu cầu một tập hợp con các thuộc tính giới hạn được trả về một thực thể (các phản hồi nhỏ hơn đáng kể) và cho phép bạn xâu chuỗi các yêu cầu (số lượng yêu cầu nhỏ hơn).

Magento hiện hỗ trợ các yêu cầu API REST và SOAP sử dụng Hợp đồng dịch vụ. Tuy nhiên, để hỗ trợ GraphQL, Magento đang viết một lớp hoàn toàn mới có giao diện trực tiếp với API truy vấn. Việc triển khai GraphQL sẽ là nền tảng cho cách một frontend PWA sẽ lấy dữ liệu mà nó cần.

Ứng dụng Web lũy tiến sử dụng các khả năng của trình duyệt web và cung cấp trải nghiệm như ứng dụng di động cho người dùng.

Nó phát triển từ một tab trình duyệt và làm cho các trang trở nên đắm đuối hơn với trải nghiệm người dùng ma sát thấp. Đây là một công nghệ web để tạo ra một trang web hoạt động và cảm thấy giống như một ứng dụng.

Người dùng có thể khởi chạy Ứng dụng web lũy tiến giống như ứng dụng gốc bất kể lựa chọn trình duyệt.

Để thử nghiệm bản demo, bạn có thể truy cập vào liên kết này: Bấm vào đây

Đây là một sản phẩm google được ra mắt trong I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

Đây là một trang web dựa trên HTML.

Nó lưu trữ bộ nhớ cache trong một thiết bị để người ta cũng có thể sử dụng nó ngoại tuyến.

Tuy nhiên, lần đầu tiên sẽ chậm trong lần truy cập thứ hai.

Nó đang được cập nhật khi thiết bị có internet, vì vậy không cần cập nhật những thứ mới như APP.

Nó kích hoạt tất cả các email đến máy chủ khi thiết bị nhận được internet nếu ai đó đăng nội dung ngoại tuyến.

Cuối cùng, không cần xây dựng ứng dụng iphone / android.

Giới hạn Nó chỉ hỗ trợ tệp HTML. Vì vậy, thiết bị nên hỗ trợ HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Thiết lập PWA (hệ điều hành Linux)

Bước 1: Cài đặt magento 2.3.1

Bước 2: Cài đặt / nâng cấp nút

Sử dụng mô-đun n từ npm để nâng cấp nút

sudo npm install n -g

Đối với phiên bản ổn định mới nhất:

sudo n stable

Đối với phiên bản mới nhất:

sudo n latest

Bước 3: Cài đặt / cập nhật sợi:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Bước 4: Cài đặt nút-gyp - Công cụ xây dựng addon gốc Node.js

sudo npm install -g node-gyp

Bước 5: Sao chép kho lưu trữ PWA Studio

Đi đến gốc html và chạy:

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

Sau khi chạy, bạn sẽ nhận được thư mục pwa-studio

Bước 6: Cài đặt phụ thuộc PWA Studio

sudo yarn install

Bước 7: Chỉ định máy chủ phụ trợ Magento

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

Lệnh ví dụ:

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

thay đổi tệp .env (đây sẽ là URL magento của bạn, không phải url quản trị viên):

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

Bước 8: Bây giờ tạo bản dựng

sudo yarn run build

Bước 9: Chạy máy chủ

sudo yarn run watch:venia

Chỉ bắt đầu môi trường phát triển cửa hàng Venia.

sudo yarn run watch:all

Chạy trải nghiệm đầy đủ của nhà phát triển PWA Studio, bao gồm việc xây dựng lại Venpack và xây dựng lại Buildpack / Peregrine đồng thời.

sudo yarn run build && yarn run stage:venia

Tạo các tạo phẩm xây dựng và chạy môi trường dàn dựng, sử dụng nhiều tài sản nén hơn và phản ánh chặt chẽ hơn sản xuất.

Khi bạn chạy một trong các lệnh trên, bạn sẽ nhận được url đức được tạo bởi PWA.

LƯU Ý: nếu bạn là người dùng tốt thì hãy sử dụng sudo.

Thực hiện theo Magento 2 doc doc dev:

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