你可能已经注意到，这篇文章有一定"进阶"难度，但它确实探讨了一个非常有趣的话题，为我们在网站和/或应用的移动优先道路上提供了新的发展方向。
我们所说的"响应式网页设计"已经存在一段时间了，在目前这个阶段，大多数开发者/网站/网页工具已经全面整合了它的原则。但这是否是"移动端友好"的终极目标？或者说这只是开始？
好吧，谷歌认为答案是后者。这就是渐进式Web应用的用武之地！
你即将阅读的文章是我们"开发者内部视角"系列的最新一篇（这里是前一篇）。它由Appticles.com的Alexandra Anghel编写。
请看Alexandra的文章：
了解渐进式Web应用与WordPress
渐进式Web应用（PWA）是结合了Web最佳体验和应用最佳体验的产物。原生应用商店的应用在过去几年通过推送通知、离线运行、流畅的动画和过渡效果、主屏幕加载等功能而大受欢迎。
移动Web应用是运行在浏览器中的JavaScript应用程序，试图将原生应用的一些功能带到Web上，但无法实现推送通知等功能。随着移动端新Web API的出现，渐进式Web应用（WordPress）正在缩小差距，在移动Web上提供完整的应用体验。
- 可靠 – 即时加载
- 快速 – 快速响应用户交互
- 引人入胜 – 表现得像原生应用
为了实现所有这些要点，渐进式Web应用（无论是否基于WordPress）必须具备以下能力：
- 在离线或网络条件较差的情况下运行
- Web应用安装横幅或添加到主屏幕
- 使用Web推送通知。随着Web推送API的引入，我们现在可以向用户发送推送通知，即使浏览器已关闭。
- 实现HTTPS
- 使用应用外壳（或app shell）架构，在用户屏幕上即时加载，类似于原生应用。
从本质上讲，PWA是用JavaScript编写的单页应用程序。离线模式、添加到主屏幕和Web推送通知都是通过服务工作者（service workers）实现的。
WordPress上的渐进式Web应用与响应式网页设计
WordPress上的渐进式Web应用不应与响应式网页设计混淆。渐进式Web应用具有响应式功能，因为它们可以适应不同的屏幕尺寸，但它们独特的价值主张是那些使其具有应用特性的功能。
在过去几年中，响应式网页设计一直是移动端Web解决方案的首选方案，但去年的一份Forrester报告指出，响应式网页设计已达到饱和——87%的数字体验从业者都采用了它——而且我们亲眼见证着客户期望向Web上的应用式体验转变的趋势正在发生。
渐进式Web应用是吸引移动端Web用户的解决方案吗？
构建高质量的 Progressive Web App 能带来诸多显著优势，让用户满意度提升、参与度增长和转化率提高变得轻而易举。有多家公司的成功案例，特别是电商行业，通过 progressive web apps 有效改善了各项指标，其中很多案例都列在 Google 开发者网站上。
- 例如，Alibaba.com 构建了一个 PWA，实现了快速、有效且可靠的手机网页体验。新策略带来了 76% 的增长，跨浏览器总转化率提升，"添加到主屏幕"的互动率提高了四倍。
- 另一个案例中，OLX 希望借助"添加到主屏幕"和推送通知来重新吸引手机网页用户。他们的参与度提高了 250%，其他指标也有所改善：页面可交互时间缩短了 23%，相应地跳出率下降了 80%。变现效果也有所提升，点击率 (CTR) 上升了 146%。
我们如何判断一个手机网页应用是否具有渐进性？
首先，渐进性是一个评分标准，而非非此即彼的二元判断。Chrome 有一个名为 Lighthouse 的插件，可以用来测量这个评分。这个插件使用非常简单，能生成一份包含所有 PWA 功能的报告，基本上可以告诉我们为了让网页应用完全具备渐进性需要做哪些改进。在我们 WooCommerce PWA 的 alpha 版本中，Lighthouse 评分达到了 91 分。
我们如何构建 PWA？
Google 的 PWA 标准并未指定任何特定的技术或框架来在 WordPress 上创建 progressive web apps。只要遵循清单要求，可以使用任何技术。很多 PWA 都是使用 Angular JS 或 React 构建的，这两个是目前最流行的 JavaScript 框架。
AngularJS 和 React 各有优势：
- Angular / Ionic 的组合目前非常流行。Ionic 是一个很棒的框架，最初是为移动应用开发的，后来扩展到了 progressive web apps 甚至桌面应用。
- React 非常直观，容易理解。它有一个很棒的样板文件 create-react-app，默认就支持 PWA。
除了这两个框架之外，VueJS 也越来越受欢迎。
接下来，我们将看到一些基于 WordPress 和 WooCommerce REST API 构建的 React 电商应用的代码示例。
您可能还对这些文章感兴趣：
了解 WooCommerce REST API
在构建电商应用时，我们首先需要的是一个能够获取数据的 API。幸运的是，REST API 已被纳入核心，这为使用 WordPress 作为后端打开了大门。此外，对于电商应用，我们可以使用热门插件 WooCommerce 的 REST API。
WooCommerce 也有一个 NPM 包（WooCommerce API）用于调用 API，但不幸的是，这个包需要消费者密钥和消费者密钥才能对请求进行身份验证。如果我们在前端应用中使用消费者密钥，就会存在安全问题。
另外，从 WooCommerce 管理后台创建密钥时，无法在路由级别指定权限，例如允许查看产品权限和写入订单权限。
因此，我们不得不在 WordPress 插件中创建一个代理，允许访问受限的 API 端点集合。我们使用 WooCommerce REST API PHP 包装器作为基础，如下例所示：
查看代码 Gist。
我们首先使用消费者密钥和密钥初始化 WooCommerce 客户端。第二和第三个方法创建一个名为 products 的自定义路由，并将该路由映射到 WooCommerce API 的 products/categories 端点。
通过这种方式，我们可以允许访问读取分类和产品，但只允许创建订单操作。
四个简单步骤创建新的 React 应用
设置好 API 后，我们就可以开始开发 React 应用程序了。安装 NodeJS 和 NPM 全局后，您可以使用 create-react-app 包快速生成一个默认支持 PWA 的 React JS 应用。
- 全局安装 NodeJS 和 NPM
- 安装 create-react-app 样板
npm install create-react-app -g - 生成 新的 React 应用程序
create-react-app my-app - 启动应用程序
cd my-app & npm start
下面是 create-react-app 生成的应用程序截图，它包含了我们需要的一切，包括热重载，我们可以开始编写代码了：
启动新应用时需要注意以下几点：
1) 组织应用文件 : 有几个很好的教程讲解了如何最佳地组织应用结构。我更喜欢按功能分类的文件夹，因为它允许更好的可扩展性。您可以在这里找到一个非常好的解释。
2) Linters 和编码规范 : 如果您不习惯使用编码规范，它们可能会很烦人，但不要跳过这一步。它们有助于清理未使用的依赖项，并确保在组件级别正确验证数据。此外，如果您安装了自动格式化代码的 prettier 编辑器插件，使用编码规范就变得轻而易举了。对于标准本身，我更喜欢Airbnb 创建的流行的那个。
3) 小型组件 : 保持组件文件较小可以使它们更容易测试和管理。您可以开始在一个组件中编写代码，一旦它变大，就将其分成较小的组件。对于 UI/UX 组件，有几个与 React 兼容的库，例如 Material UI、Semantic UI 甚至 Bootstrap，这里只是举几个例子。
这些库包含一组现成的组件，如网格、菜单、卡片、按钮等等。这是一个使用基本 Semantic UI 元素构建的电子商务应用程序界面示例：
您可以看到分类列表、产品列表和侧边菜单。让我们深入研究代码——您将看到使用 React 创建这样的示例有多么简单。
深入了解 ReactJS
这是一个从API读取产品分类集合的React组件。组件的状态使用一个空的分类列表初始化。在React在渲染之前自动调用的componentWillMount方法中，我们发起一个请求来获取分类，并在收到响应后将其添加到状态中：
查看代码 Gist。
正如你所看到的，当收到分类时我们不需要调用render方法，React会自动处理并重新渲染组件。render方法只是返回另一个名为CategoriesList的自定义组件，它接收分类数据，看起来是这样的：
查看代码 Gist。
上面的组件遍历它作为props接收的分类列表，并调用另一个名为CategoryCard的自定义组件来渲染单个分类元素。
所有这些组件通过在它们之间传递props来进行通信。Categories主组件调用API并将分类列表传递给CategoriesList，然后CategoriesList将分类详情传递给CategoryCards。
使用Redux管理全局应用状态
上述方法的问题在于，有时候我们需要管理位于应用程序顶层的数据，例如添加到购物车中的产品列表。产品数量显示在标题栏的购物车图标中，但也会在结账页面上显示为列表。
如果我们把所有这些数据都添加到父应用程序组件中，在较大的应用程序中会变得非常难以管理。这就是诸如ReduxJs这样的库的用武之地。需要明确的是，Redux可以与任何JavaScript框架结合使用，它并非仅限于React。
此外，使用Redux并不意味着我们不能在组件级别使用state或props。Redux应该只用于保存对应用程序层面有意义的数据。
让我们看看如何从API读取产品并将其渲染到列表中，类似于我们对分类的需求，但这次使用Redux。首先，我们需要通过将主应用组件包装到全局store中来建立与Redux的连接：
查看代码 Gist。
在这个例子中，全局应用store将包含一个分类列表和一个产品列表，它们使用Redux的combineReducers方法合并在一起。
然后，我们继续定义Redux actions，它们是非常简单的函数，返回必须包含type属性的对象。由于JS是异步的，我们需要两个actions：一个用于表示请求已发送，另一个用于表示已收到响应。整个应用程序都会知道这些actions何时发生。
下面，我们还添加了一个名为fetchProducts的函数。如你所见，这个函数：
- 分发请求产品的action，
- 调用API获取产品，
- 收到结果时分发
receiveProductsaction。
查看代码 Git。
为了修改应用状态，我们需要添加一个所谓的Redux "reducer"。这个reducer只是一个监听特定actions并更改全局状态一部分的函数，在本例中是产品列表。
这个reducer在收到请求产品的action时不执行任何操作，它总是返回当前状态。对于接收产品的action，reducer返回传递给它的数据，在本例中是一个产品列表。
查看代码 Gist。
最后，我们在新的Products组件中使用这些actions和reducer。
在 Gist 上查看代码。
该组件封装在 Redux 的 connect 方法中，只在其 componentWillMount 方法中分发 fetchProducts。此外，该组件包含一个产品列表，但如您所见，产品列表组件并不直接接收产品数据。这是因为产品列表组件也使用 Redux 直接链接到全局应用状态。
这样，它可以直接从应用商店获取产品数据，遍历产品列表，并使用 ProductCard 组件渲染单个产品元素。
在 Gist 上查看代码。
到目前为止，我们已经看到了一些显示数据的示例，但如果我们想要添加用户交互，例如将产品添加到购物车，该怎么办？
在这种情况下，当用户点击“添加到购物车”按钮时，我们将分发动作来修改全局应用状态。显示购物车产品数量的标题栏将与 Redux 连接。它将计算应用程序购物车中保存的产品数量并相应地更新自身。
将应用与 WordPress 连接
这些都是帮助您入门的基本示例，您可能想知道如何将这个应用与 WordPress 连接。
好吧，我们可以将应用托管在子域名上让它连接 API，或者我们可以将其用作 WordPress 主题——即创建一个非常基本的主题，包含一个 index.php 文件来加载 JavaScript / CSS 文件。create-react-app 样板文件包含创建应用构建的命令，因此我们可以立即获取生产文件。
在 Gest 上查看代码。
在哪里使用 Service Worker
对于离线模式，我们可以添加一个 service worker，即使用户离线也能显示应用外壳。Service worker 只是一个在浏览器中注册的 JavaScript 文件。
在 Gist 上查看代码。
有几种策略可用于离线模式，例如网络优先或缓存优先，您可以在 Google 的离线烹饪书中了解这些内容。
缓存应用外壳即使在有网络连接时也有好处，因为应用加载速度会更快。
如果您想更进一步并开始缓存来自 API 的数据，可以使用 redux-persist 等 NPM 包，修改您的应用以从浏览器的本地存储保存/检索数据。
对于 Web 推送通知，我们建议查看One Signal 免费 WordPress 插件。此插件也适用于响应式主题，因此您应该立即查看。
WordPress 中渐进式 Web 应用的未来发展
您可以在此处找到上述 WooCommerce PWA 的演示。
我们已经在开发测试版，以下是我们路线图的一部分：
- 添加离线模式功能
- 添加推送通知
- 完善结账流程
如果您想贡献或根据您自己的需求进行自定义，您可以在 GitHub 上找到电子商务渐进式 Web 应用的 alpha 版本。
您如何看待WordPress网站的渐进式Web应用，以及它们在移动WordPress领域可以发挥的作用？您是否考虑在下个项目采用这种方案？
…
别忘了参加我们的WordPress网站加速速成课程。通过一些简单的修复，您可以缩短高达50-80%的加载时间：
如何加速您的WordPress网站
通过一些简单的修复，您可以缩短高达50-80%的加载时间 🚨
新闻通讯表单 – 侧边栏
名 *
您的邮箱 *
立即订阅！
如果你是人类，请留空此字段。
Δ
输入您的邮箱即表示您订阅我们的每周通讯。您可以随时更改您的决定。我们尊重您的收件箱和隐私。
布局和展示：Karol K.
关于作者：Alexandra Anghel是Appticles.com的联合创始人兼首席技术官——一个用于构建渐进式Web应用的平台。作为平台的扩展，Appticles有一个WordPress插件（WordPress Mobile Pack），下载量已超过100万。Alexandra是一位全栈开发人员。她曾参与两个商业加速器——Startupbootcamp（丹麦哥本哈根）和Prosper Women Accelerator（美国圣路易斯）。2017年初，她作为联合创始人加入了Codette。
