文档 下载安装 商店 博客 问答 主机

Magento2.3激活PWA Studio

安装
pwa

#1

Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。

Venia是一个PWA前端,也是目前Magento2.3支持的最新最牛的功能.
PWA可以加快Magento前端渲染速度50%+

一.PWA安装需求

  1. NodeJs 8.x+
  2. NPM
  3. 一个Magento2.3版本+

二.PWA安装过程

  1. 克隆PWA到你的开发环境
git clone https://github.com/magento-research/pwa-studio.git
  1. 安装PWA依赖.
    首先cd到你的pwa根目录下,然后运行:
npm install
  1. 设置PWA后端
    也就是指定你的Magento2.3地址.
    首先复制.env文件:
cp packages/venia-concept/.env.dist packages/venia-concept/.env

然后编辑你新复制的packages/venia-concept/.env文件.并且指定MAGENTO_BACKEND_URL的值,例如:

MAGENTO_BACKEND_URL="https://www.magentochina.org/"

三.安装Magento2.3

首先cd到你要安装magento的根目录(需要是空目录),然后运行Composer安装Magento2.3

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition:2.3.0 .

其他安装过程就不说了…

四.启动服务器

在你的项目根目录运行命令用于构建你的Artifact:

npm run build

运行服务器

在项目根目录内运行命令启动服务器:

npm run watch:venia

启动Venia前端开发环境:

npm run watch:all

运行Magento PWA完整开发者体验:

npm run build && npm run stage:venia

该命令会压缩大量文件,用于生产环境.

浏览应用

开发服务器运行成功后,会在终端看到类似的输出:

PWADevServer ready at https://www.magentochina.org:8001
或者是:
Launching staging server…

https://www.magentochina.org:51828/

Staging server running at the address above.

这个地址是PWA的地址,用于开发。并不影响你正常的Magento前端。
恭喜你完成了PWA的安装.