Posted on

magento手机端-移动端方案

PWA方案:

解决移动端速度问题

官方方案:https://magento.github.io/pwa-studio/

缺点:

1,用的技术过度复杂,繁多,学习成本,开发成本高。包含  React,  UPWARD,  magento/peregrine, magento/venia-ui ,GraphQL等等,复杂度高。

2, Magento GraphQL 访问后台服务 API 也是很慢的

(API performance is awfull – GraphQL Should return data with TTFB less than 100ms, when real M2 performance is around 1 second.)

3, 技术和主流方向不同,技术不通用容易过时。

4,UPWARD是Node.js 后端服务,增加了开发复杂性

第三方PWA方案 vuestorefront

特点:

1,通过 新的api服务访问,用了 elasticsearch 而不是 GraphQL , 下单用 redis 消息队列

https://github.com/vuestorefront/vue-storefront-api ,这样会提高性能

2,比较完善的页面组件

https://github.dev/vuestorefront/magento2

比较完善的文档:

https://docs.vuestorefront.io/magento/guide/composables/use-cart.html

缺点:

1,为了兼容太多商城,插件化,所以会过度复杂,学习成本高

2,代码不是和常规vue项目,有一定学习成本,需要前端有一定水平

3,新开发,插件的前端兼容开发,也是很多开发成本

3,定制化的pwa:   laragento+vue

Php后端定制化:https://github.com/Genaker/laragento

Vue 前端定制化, 前端人员自行选择适合自己的方案vue,

相当于重新用 通用熟悉技术 重新开发 移动端+PWA,工作量大。

4, 兼容性的方案  hyva-themes  +  Magento2PWA

技术简单介绍:https://www.fisheye.co.uk/2021/04/16/hyva-themes-a-guide-for-merchants/

hyva-themes  :https://hyva.io/hyva-themes-license.html  ,

Magento2PWA :https://github.com/Genaker/Magento2PWA

特点:

一个从底层技术重新开发的magento模板(不是继承原来模板),基于类 vue 的技术(TailwindCSS and AlpineJS )。 不用(Knockout/Require/jQuery)

不用原模板技术( layout.xml and .phtml ),不用原模板几百个js依赖那种(单纯依赖 Alpine.js)

减少请求:a stock Luma theme makes over 250 network requests on a category listing page, Hyvä reduces the request count to thirteen.

减少页面复杂性:sixty eight blocks vs. twenty three blocks

服务后端是用 graphql

插件的兼容性功能,需要处理

Lighthouse performance分数从 10 达到 97

Alanstorm 大牛推荐:

https://alanstorm.com/magento-frontend-2020-a-preview-review-of-hyva/

Demo: https://demo.hyva.io/

Magento2PWA 介绍:

https://yegorshytikov.medium.com/magento-2-pwa-in-5-minutes-without-re-platforming-real-use-case-3a77249862b3**  把网站简单转为PWA**

Hyvä’s primary focus is speed and minimal code (incredibly lean sites), PWAs are more focused on providing an app-like experience (one of which is speed)

缺点

1,付费模板

2,一定的学习成本(相对不高)

3,Third-party Extensions** 第三方插件需要兼容处理**