PWA 与 SPA：相似但不同

标准网站的吸引力开始失去魅力，让位给 Web 应用程序。 随着时间的推移，Web 应用程序因其引人入胜且速度惊人的体验而变得越来越流行。

大多数技术成功只能通过在您的网站结构中实施某些架构来获得，以确保您的网站的稳定性、性能和参与度。

目前构建 Web 应用程序的两种流行方法是 PWA 和 SPA。 对于这两种方法的常见概念，它们并不相同。 这一点至关重要，因为他们被忽视的差异往往会导致代价高昂的错误和失去机会； 当然，您（可能是对每一毫秒都很重要的网站所有者）不希望您的 Web 应用程序落后于世界其他地方。

它们是如何工作的？

单页应用程序 (SPA)

SPA（单页应用程序）是一个网站，其当前页面是动态更新的，而不是完全从服务器下载的。 换句话说，您的 Web 应用程序（HTML、CSS、JavaScript）的所有必要应用程序代码只需要加载一次。 当用户浏览 Web 应用程序时，所有需要更新的内容和元素都会被获取并重新呈现，而无需用户重新加载浏览器。

这节省了浏览器和服务器之间的传统往返，从而允许更快的交互和更好的用户满意度。

您可能一直在使用 SPA，甚至没有意识到这一点。 注意大多数社交媒体网站的感觉如何？ 这是因为他们都使用 SPA 来简化用户体验并创建持续的新闻更新提要。

以下是您可能经常使用的一些值得注意的 SPA：

• Facebook
• 邮箱
• 领英
• 网飞
• 谷歌地图

渐进式 Web 应用程序 (PWA)

与 SPA 不同，Progressive Web App (PWA) 更像是一组指南和清单，而不是特定的架构。 PWAs 是众所周知的，并且与 SPAs 有几个不同的特点，例如：

• Service Worker：Service Worker 为 PWA 的许多突出特性提供了技术基础，即离线可用性和推送通知。
• Web App Manifest：一个 JSON 文件，其中包含 PWA 所需的元数据。 可以使用 PWA 清单生成器自动生成 Web 应用清单。
• HTTPS：PWA 始终从安全来源提供服务。

Service Worker 充当浏览器和网络之间的代理，负责网站资产的缓存和网络请求的拦截，从而导致网站的离线可用性和包括推送通知在内的各种其他功能。

服务人员也在后台提供了极大的帮助。 除了提供离线功能外，他们还负责大量繁重的计算，这也是大多数 PWA 网站如此高效和快速加载的主要原因。

我们已经编写了关于什么是 Progressive Web App 的深入指南。 所以你不能错过！

他们有什么相似之处？

作为新技术和革命性的技术，这两种架构为其用户提供了一种与传统网站截然不同的应用程序式、引人入胜的体验。 乍一看，他们很容易被误认为是彼此； 然而，使所有这些体验成为可能的基本过程并不相同。

有什么不同？

有一个普遍的误解认为 PWA 几乎总是 SPA，这是完全错误的。 从上面的 PWA 要求中，您可以看到它没有声明其网站内容必须在浏览器中呈现，或者 PWA 不应请求服务器呈现的页面。

简而言之，PWA 是一个具有 Web 必须提供的所有最佳品质的网站。 它可靠、快速且引人入胜。

而且由于 PWA 需要在与 UI 不同的线程中运行的服务工作者，因此 PWA 的不同之处在于它们的内容总是几乎即时显示，这与 SPA 不同，SPA 几乎总是伴随着特定的初始加载屏幕来预取网站'资产。 这意味着 SPA JavaScript 框架在您的 Web 应用程序上放置的大部分（如果不是全部）大量 JavaScript 开销都可以重新分配给服务工作者。

显然，这两者之间的差异不仅如此，还有很多需要剖析：

在速度方面

在速度方面，这两种架构非常相似，因为它们都是尖端技术。 然而，这里的优势可能会流向 PWA。

这样做的原因是，虽然 SPA 和 PWA 都使用 JavaScript 进行开发，但 PWA 能够利用其服务工作者来渲染一些作品。 换句话说，SPA 添加到您的 Web 应用程序中的大部分过多的 JavaScript 开销可以转而委托给服务人员，从而大大减少 JavaScript 占用空间。

这使 PWA 站点能够在需要之前预先缓存许多站点资产：脚本、CSS、图像和标记。 多亏了这些预缓存，用户的网络可以减轻渲染带来的额外压力，并且能够离线工作。

在成本方面

这是 PWA输给SPA 的地方。 PWA 拥有尖端技术，因此需要额外的成本。 更不用说 PWA 的开发通常一次持续数周甚至数月，因为它不像 SPA 那样简化流程。

PWA ： $2000 – $20.000

SPA : $1500 – $12.000

有许多因素会影响您的建筑成本，例如开发人员的费率、工作的复杂性、您的偏好和定制……在进行成本估算时，所有这些都应该考虑在内。

 推荐阅读：构建一个 Magento PWA 需要多少钱？

在用户体验/用户界面方面

虽然 SPA 过去曾占有一席之地，但人们开始转向 PWA，因为它提供了更好的用户体验 (UX)。

PWA 都拥有类似应用程序的界面，即使在离线或连接速度较慢的情况下也能带来更多的参与度和可靠性。 出于这些原因，Twitter 等有影响力的品牌通过发布他们自己的网站的 PWA 版本，即 Twitter Lite，发起了 PWA 运动。

这不仅仅是推特。 PWA 运动预计将继续存在； 再加上最近 Spotify 的参与，这一运动似乎并没有很快放缓的迹象。

单页应用程序的局限性在于无法在大型网站上提供令人满意的用户体验，这就是为什么它最适合面向数据且不一定具有视觉效果的网站（如 Gmail 和 Facebook）的原因。

在安全方面

安全是一个微妙的话题。 虽然 PWA 和 SPA 都使用 JavaScript 作为开发的主要库，但它们在安全性方面的问题有很大不同，其中大部分来自 SPA 及其 XSS（跨站点脚本）问题。

PWA 提出的安全问题要少得多，因为 Progressive Web App 的本质是所有连接都通过安全的 HTTPS 来源。 与 PWA 一样，HTTPS 也是 Web 的未来，通过它可以访问服务工作者等尖端功能并使其成为可能。

在可访问性方面

与 SPA 相比，PWA 通常更易于访问，尤其是最近 Chrome 对桌面 PWA 的支持。 与 PWA 交互的用户可以选择将他们正在使用的应用程序的快捷方式添加到他们的主屏幕或桌面。

SPA 在可访问性方面实际上很糟糕，因为每次执行页面转换时，它都会让用户处于茫然无措的状态。 这对于残障用户来说尤其令人沮丧，因为如果页面不断改变其 DOM（文档对象模型）结构，则没有 aria 或角色属性能够帮助他们。

包起来

尽管 SPA 可能具有革命性，但时间似乎已经慢慢赶上了它。 虽然 SPA 和 PWA 是相同的，但鉴于 PWA 带来的好处，越来越多的人选择 PWA 而不是 SPA，这是可以理解的。

通过 SimiCart，我们为 Magento 商家提供最佳 PWA 解决方案。