单页应用程序和渐进式 Web 应用程序的好处：改进 CX

已发表: 2019-06-06

随着客户体验要求电子商务提供商与他们提供快速、可靠的交互，单页应用程序的好处变得越来越明显。

在过去的 20 年中，大多数网站都是以相同的方式构建的——使用 HTML、CSS 和 JavaScript。随着时间的推移，这些技术变得越来越先进，但其原理基本保持不变：用户与网页交互，用户的浏览器调用 Web 服务器，该服务器反过来用另一批 HTML、CSS 和JavaScript，然后加载并显示在浏览器中。

（唷。这是很多。）

这个过程最常涉及刷新页面，尽管一些技术，如 AJAX，确实使开发人员能够在不刷新整个页面的情况下更改某些内容。正因为如此，大多数网站的行为和行为都像网站，而不是应用程序。

大多数网站还具有紧密耦合的后端和表示层，这意味着网站的前端和后端之间没有真正的分离，因为它们都是单个整体应用程序的一部分。

单页应用程序和渐进式 Web 应用程序如何改善客户体验

在过去十年中，原生 iOS 和 Android 应用程序已成为我们几乎所有人的普遍应用。这些应用程序的行为与实际网站不同，为用户提供了非常不同且通常更令人满意的体验。

按下链接或按钮时页面不会刷新，更改加载速度更快，并且体验通常比同等的移动网站好很多。在原生电子商务应用程序的情况下，当用户点击链接时，应用程序将调用后端服务器，而不是该服务器返回 HTML、CSS 和 JavaScript 表示层，它只是发送所需的原始数据，应用程序管理向用户显示的方式。

例如，如果用户单击产品以查看其详细信息，则应用程序将调用后端服务器询问该产品的详细信息，并且服务器将响应包含诸如产品名称、产品名称等项目的数据字符串。价格和图像链接，但不需要同时发送任何 HTML、CSS 或 JavaScript 来定义图像的显示方式。

应用程序本身就是表示层，因此它不需要来自后端服务器的任何内容。这要快得多，并且允许应用程序在不刷新页面的情况下向客户显示产品详细信息。该技术使开发人员可以自由地构建无缝且流畅的客户体验，而不受传统模型的限制。

如果可以通过 Web 浏览器提供类似应用程序的体验，从而使原生应用程序和网站之间的区别变得模糊，那不是很好吗？

这就是单页应用程序 (SPA) 和渐进式 Web 应用程序 (PWA) 的用武之地。

什么是单页应用程序？

SPA 是用 JavaScript 编写的应用程序，可在 Web 浏览器中运行，通常不需要刷新页面即可显示新信息。

当用户第一次访问网站时，应用程序以及演示资源（HTML、CSS 和一些脚本）被加载到浏览器中。从此时开始，用户在单个网页上，应用程序正在加载相关内容并在需要时更改显示。

就像原生应用程序一样，当用户点击链接时，应用程序调用后端服务器，后端服务器反过来以字符串的形式发送所需的数据，该字符串通常不包含任何演示资源，因为它们已经被当用户第一次访问网站时加载。

因为用户基本上只在一个网页上，所以实际上并没有刷新页面的概念。相反，应用程序会在需要时更改页面以显示不同的信息。

SPA 通常与后端应用程序完全解耦，并通过一组 API 与后端接口。它通常位于自己的服务器上，可以单独部署。在某种程度上，它对后端应用程序非常不可知，因为它只是向后端应用程序发送和接收数据 - 将其视为第 3 方系统。

我们都已经使用 SPA 有一段时间了，可能甚至没有意识到这一点。 Facebook、Gmail、Twitter、LinkedIn 和 Instagram（以及许多其他）都使用 SPA 来代替他们的网站。

如果您现在访问这些网站中的任何一个，您会注意到它们的行为更像原生应用程序，而不是传统网站。页面很少（如果有的话）在您与它们交互时刷新，而且速度非常快。单击链接和按钮会更改您正在查看的内容，但像页眉和页脚这样的项目在最初加载后几乎不会刷新。

单页应用程序的好处

SPA 最大和最明显的优势是如何通过允许设计人员和开发人员提供类似应用程序的体验而不受重新加载页面的传统方法的限制，从而改善客户体验。

这确实需要一种新的设计和思考方式，因为常规规则不再适用，但对用户体验的好处可能是巨大的。

SPA 加载内容的速度通常比标准网站快得多，因为大部分演示资源（HTML、CSS）只加载一次。与应用程序的交互只需要调用后端服务器来检索少量数据，而不是完整的 HTML/CSS 页面。然后应用程序可以快速显示更改的数据，而无需重新加载页面。

因为 SPA 与后端应用程序完全解耦，可以单独部署，具有非常大的优势。一个小的前端更改不需要部署整个应用程序，这可能是一项相当大的任务，有时需要停机。

SPA的缺点

使用 SPA 的最大挑战之一是它对 SEO 的影响。由于它们并不总是具有不同页面的传统结构，每个页面都有不同的 url，这可能会导致搜索引擎索引内容的问题。但是，这可以通过使用诸如服务器端渲染和确保点击生成唯一 URL 等技术来解决。

随着时间的推移，它也变得不再是一个问题，因为搜索引擎机器人正在改变以应对 SPA。毕竟，谷歌是支持他们的公司之一。

一些 SPA 在第一次访问时需要一些时间来加载，因为应用程序和演示资源是在第一个页面视图上加载的。

这对于 Gmail 等 SPA 非常明显，当您第一次访问该网站时，它们的加载图像很大。这个问题可以通过使用服务器端渲染和高效编程来解决，以确保应用程序和资源的初始负载不会太大。

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

PWA 有点难以定义，因为它不是任何特定的技术，而更多的是一种开发方法或一组原则，它们共同构成了网站或应用程序或多或少的 PWA。

PWA 这个词最初是由谷歌创造的，谷歌创建了一个清单来定义什么是 PWA。除其他事项外，Google 已定义 PWA 必须是：

安全 - 在 https 下提供
响应式 - 适合任何外形尺寸
能够离线工作——使用服务工作者缓存页面
快速——能够在 3G 连接上快速加载
App-like – 使用 app-shell 模式和设计感觉像一个应用程序
可安装 - 使用清单文件允许将应用添加到主屏幕
参与——使用推送通知等工具
渐进式 - 适用于所有浏览器，但在现代浏览器上逐渐变得更好

如您所见，某些清单项目有点模糊或主观。您还可以看到其中一些听起来类似于 SPA。传统的 HTML/CSS 网站可以像 SPA 一样变成 PWA。 SPA 不会自动成为 PWA，但具有一些将其推向该方向的功能。

迷茫了吗？

PWA 的优势

与 SPA 一样，PWA 的最大优势之一是改善了客户体验，使其具有类似应用程序的感觉，并弥合了传统移动网站与原生 iOS 或 Android 应用程序之间的差距。

诸如保存到主屏幕或能够通过服务人员缓存页面等功能可以使网站看起来和感觉有点像原生应用程序。

PWA 也往往非常快，因为这是清单中的关键原则之一。

Android 操作系统允许浏览器访问移动设备的硬件。它允许推送通知和使用 NFC 扫描等功能，这可以真正改善 CX。

PWA 的缺点

PWA 的最大缺点是缺乏 Apple 的支持。为了充分利用 PWA，它确实需要在 Android 设备上运行，因为 Android 操作系统允许浏览器访问设备上的大量功能，而 Apple 严格限制了这一点。这种情况正在慢慢改善，但还有很长的路要走。

另一个缺点是缺乏明确的定义，可以进行解释。

SPA 和 PWA 是网站开发的未来

虽然这项技术对于大多数电子商务网站来说还不是完全主流，但它无疑是网站发展的未来。

虽然 SPA 是一种可用于构建电子商务应用程序的特定技术，但 PWA 通常是按照 Google 制定的方法构建的网站，他们认为这种方法可以提供最佳客户体验。

任何开发 SPA 的人都应该尽可能地满足 PWA 清单，以提供最好的 CX。这些技术为设计人员和开发人员在用户体验和旅程中提供了更多自由，使他们能够摆脱传统的逐页模式。

SAP 和 IBM 等许多软件提供商都在大力投资为其电子商务平台创建 SPA 前端，我怀疑在几年内，大多数电子商务网站都会以这种方式构建，使用 Angular 等 JavaScript 框架， Vue 或 React。

使用传统 HTML/CSS 模型构建的电子商务网站将越来越少，网站与原生应用程序之间的差距将越来越小，以至于难以区分。