Magento 2中的渐进式Web应用程序或PWA是什么？

• Magento成为渐进式Web应用程序平台意味着什么？
• Magento中的PWA的代码结构是什么？
• REST API和PWA有什么关系？

什么是渐进式Web应用程序？

• 外观和行为类似于移动应用。
• 以优势的本地移动设备的功能，而无需 最终用户访问一个应用程序商店，进行购买和下载它 在本地。

为什么选择PWA？

• 快速
• 安全（答案的倒数第二）
• 反应灵敏
• 跨浏览器兼容
• 脱机模式（检查答案中的最后一个主题）
• 手机“安装”
• 共享内容

该答案还涉及-使用PWA安装Magento 2.3

让我们以Flipkart为例

印度最大的电子商务网站Flipkart决定将其网络影响力和本机应用程序结合到一个渐进式Web应用程序中，从而使转化次数提高了70％

Flipkart

方法

1. 开发了渐进式Web应用程序Flipkart Lite
2. 增加了服务人员，以加快加载时间
3. 以60帧/秒的速度流畅地导航和滚动
4. 创建了“添加到主屏幕”提示，以鼓励用户将移动网页添加到其主屏幕

   ---

结果

新的渐进式Web应用程序帮助Flipkart提升了转化率70％

Flipkart也可以在离线模式下使用

• 可以对服务工作者进行脚本编写，以拦截每个网络请求，并即使用户处于脱机状态，也可以提供来自缓存的响应。
• 服务人员包装库，它使使用简单的图案，如NetworkFirst，CacheFirst或NetworkOnly。 SW-Toolbox提供Flipkart应用程序中使用的LRU 缓存，用于在浏览页面和最近访问的产品页面上存储以前的搜索结果。
• 该工具箱还具有TTL-based 缓存失效机制，可用于清除过时的内容。服务工作者提供了低级可编写脚本的原语，以实现此目的。

但是...但是...但是...

什么是Magento PWA Studio？

• • Magento PWA Studio项目是一组开发人员工具，可用于在Magento 2之上开发，部署和维护PWA店面。

Magento PWA Studio项目提供以下工具：

---

pwa模块

• 它具有帮助程序，服务器端功能等模块，并且是使用Magento PWA Studio创建的所有主题的基础。

PWA-buildpack -

• Buildpack是Webpack用于开发Magento PWA主题的一组插件和工具。

• 它还用于设置和配置Magento 2平台的本地开发环境。

它包含以下工具：

• PWADevServer
• Magento解析器
• Magento根组件插件
• magento布局加载器
• 服务人员插件

百富勤 -勤是一套React components建立以处理Magento的特异功能一样routing，root-components，布局处理器，产品的清单，价格显示等

Venia主题 -venia-concept是由Magento使用Magento PWA工作室创建的演示主题。它展示了所有当前可用的功能，工作流程和页面

PWA Studio不是

• Magento的新版本

• 甲更换所有前端的

• 桌面应用程序

PWA Studios中使用的工具和库

Webpack

• Webpack的主要功能是根据项目模块中的依赖关系创建一个或多个捆绑包。

应用程序外壳

• 总尺寸较小
• 初始负载要求三个文件：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比与App壳牌方法可见早。

可以使用混合方法，其中将外壳程序和内容分为两个请求（请参阅管理页面作为示例）。当内容比shell大得多且shell应该更早可见时，这是有意义的。

ReactJs

• 一个用于构建用户界面的JavaScript库。

Redux

• 一个JavaScript库，用于管理Web应用程序中的状态。

GraphQL

• 客户端的数据查询语言和服务器端的服务层。

Magento中的GraphQL

身份验证和架构

减少前端查询量

阶段渲染

桌面浏览器兼容性

• 不支持：IE，Safari

移动浏览器兼容性

不支持：Android Webview，IE，Safari

PWA更安全

• 作为网络开发人员，您可能知道Google鼓励网站拥有多少https而不是HTTP。网络威胁始终是Web和应用程序开发人员的首要考虑因素。
• 过去，HTTP安全性不足以保护用户的信息。
• 现在正在对网站进行编程，HTTPs并且很容易在安全的环境中启动Progressive Web App。
• 当在PWA中输入个人信息（例如信用卡信息或联系方式）时，他们可能会感到安全并且放心。

PWA-离线模式

离线Wikipedia应用程序是使用应用程序外壳模型的 PWA的一个很好的示例。

• 它会在重复访问时立即加载，但会使用JS动态获取内容。
• 然后，将这些内容脱机缓存以供将来访问。

毫无疑问，渐进式Web App是Web开发的未来。将来，电子商务网站，餐厅和媒体资源将从本机应用程序过渡到渐进式Web应用程序。但是，仍处于初始阶段，许多开发人员将积极寻找方法，以充分利用PWA提供的机会。

让我们从使用PWA的Magento 2.3安装开始

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：

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 管理员->内容->主题

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.现在，导航到pwa-studio项目的venia-concept目录，复制.env.dist到新.env文件中，并使用URL将变量更新到您的Magento开发商店。

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-渐进式Web应用程序是用户体验丰富Web的一般Web应用程序。以：

• 可靠 -即时加载，也可以在离线模式下使用。
• 快速 -一种交互方式，用户可以与之流畅地交互，并且无需任何滚动或动画垃圾。
• 参与 -如以上两点所述，如果应用程序可靠且快速，则显然可以吸引更多的用户体验，并且感觉像是自然的应用程序。

“ Magento成为渐进式Web应用程序平台意味着什么？”

当magento为2.3版本发布做准备时，它包括此“ PWA”功能，以通过用户交互的方式使前端更加高效。

REST API和PWA有什么关系？

随着magento使用“ PWA”，它还添加了“ GraphQL API”，以提供“ REST / SOAP”的前端开发方api替代品作为“ GraphQL” api。

有关“ PWA”和“ magento2.3开放商务”新功能的更多详细信息，请访问此magento的官方页面。

渐进式意味着用户在您的网站上浏览时，该应用程序会与所有相关数据和资产一起加载。这样可以为最终用户带来更好的速度，可用性，离线操作和设备集成体验。

Web表示它是用Web的语言（HTML，CSS，JavaScript）编写的。这使您可以创建一个提供更多类似应用程序功能的网站，而无需创建仅限于一个平台（例如iOS或Android）的本机应用程序。

应用程序意味着它在购物者的设备或计算机上安装并运行代码。与过去的单页JavaScript应用程序相比，这样做可以提高速度和功能。

PWA本质上是常规网页和移动应用程序的混合，从而为Web提供类似移动应用程序的体验。

Magento正在成为渐进式Web应用程序平台。也就是说，Magento正在开发一套工具来构建在线商店作为渐进式Web应用程序。这些工具将帮助开发人员学习PWA技术，构建闪电般的PWA前端，并创建PWA组件和扩展以在Magento Marketplace上重复使用或销售。综上所述，Magento将此工具套件称为Magento PWA Studio。

您可以在https://github.com/magento-research/pwa-studio检查代码结构

Magento PWA使用GraphQL作为PWA的REST API的替代。

有关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

• 渐进式Web应用程序是可安装的移动应用程序和网站之间的中间地带。我们预计，到2019年，移动设备在互联网上的访问量将比台式机增加。PWA可以改善网站的外观和风格，从而提高转化率。

PWA为Magento商户提供了快速，无摩擦的“类似应用程序”的体验，可带来更多流量，更高的转化率和更快的页面加载时间

因此，一般而言，Magento会改变其外观并增加转化次数。 在这里阅读更多信息。

• PWA通常使用JavaScript，CSS和HTML构建，它们的性能和可用性水平几乎与本机应用程序相同。PWA具有以下特点：

  1. 它们可与大多数（如果不是全部）浏览器和设备（移动和台式机）一起使用渐进式代码库（通常基于组件，例如React Js）
  2. 使用响应式设计，适合所有屏幕和形状因数利用服务工作者来启用脱机连接（需要HTTPS）
  3. 提供类似应用程序的体验，利用重新参与工具（例如推送通知）
  4. 利用网络应用清单来描述已使用的资源

你可以在这里阅读更多。

• SOAP（简单对象访问协议）和REST（表示状态传输）是最常见的Web服务通信协议。在大多数情况下，REST比SOAP更为可取（在此进行解释）。因此，看到REST API与PWA等新技术结合使用是合乎逻辑的。

仅回答您问题的一部分，但仅回答Magento 2。

由于未来的Magento 2.3版本，PWA的构建将变得更加容易。

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

从本文引用：

PWA

渐进式Web应用程序是为利用现代技术功能而构建的应用程序，该功能在无法使用这些功能的设备上“逐步”缩小。它还允许缓存数据，以便当互联网服务不完善或不存在时，可以在脱机模式下（部分或全部）使用网站。通常，这是通过使用与后端应用程序明显不同的现代JavaScript框架/堆栈编写网站的前端来实现的。该JavaScript应用程序可以使用新的（ish）浏览器功能来完成上述任务。

Magento意识到了这样做的多重好处，并于2017年底宣布致力于建立所谓的PWA Studio。PWA Studio将包含用于为Magento的前端开发和部署PWA的工具。随PWA Studio一起将提供一个轻量级（并非功能齐全）的演示站点。直接的好处将是前端性能的大幅提高，以及新的Magento前端开发人员的入职速度提高近10倍。

• 相关内容：PWA在这里，它们正在改变一切

GraphQL

GraphQL是使用API​​的查询语言。随着PWA的兴起，需要获取更少量的数据并发出更少的API请求。GraphQL的查询语言通过允许请求者请求要返回的关于实体的有限属性子集（显着较小的响应）并允许您链接请求（较少请求数），从而实现了这一点。

Magento当前支持使用服务合同的REST和SOAP API请求。但是，为了支持GraphQL，Magento编写了一个全新的层，该层直接连接到Query API。GraphQL实现将成为PWA前端如何检索所需数据的基础。

渐进式Web应用程序使用Web浏览器功能，并向用户提供类似体验的移动应用程序。

它是从浏览器选项卡开发的，使页面更具沉浸感，并具有低摩擦用户体验。它是一种制作网站的网络技术，其作用和感觉就像是一个应用程序。

无论浏览器选择如何，用户都可以像本地应用程序一样启动Progressive Web Application。

对于演示测试，您可以访问此链接：单击此处

这是在I / O 2017 I / O 2017期间推出的Google产品：https : //www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

这是一个基于HTML的网站。

它将缓存存储在设备中，因此也可以脱机使用它。

但是，第一次访问很慢，第二次访问会很慢。

当设备连接到互联网时，它将进行更新，因此不需要更新诸如APP之类的新事物。

如果某人离线发布某些内容，则它会在设备连接到互联网时触发所有发送到服务器的电子邮件。

最终，无需构建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：安装/升级节点

使用npm中的n个模块以升级节点

sudo npm install n -g

对于最新的稳定版本：

sudo n stable

对于最新版本：

sudo n latest

步骤3：安装/更新yarn：

sudo npm install --global yarn

sudo npm upgrade --global yarn 

步骤4：安装node-gyp-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文件中的更改（这将是您的magento 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开发人员经验，包括Venia热重装和并发Buildpack / Peregrine重建。

sudo yarn run build && yarn run stage:venia

生成构建工件并运行登台环境，该登台环境使用更多的压缩资产并更紧密地反映生产。

一旦运行上述命令之一，您将获得由PWA创建的virtul url。

注意：如果您是rood用户，请使用sudo。

关注Magento 2官方开发文档：

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