【51CTO.com快译】不知您是否已注意到，单页面应用程序(Single-page applications，SPA)和渐进式Web应用程序(Progressive web apps，PWA)正在彻底地改变着企业Web服务的交付模式。这两种新技术虽然看起来十分相似、甚至经常被人们所交替使用，但是实际上两者有着本质上的区别。下面让我们一起来深入研究它们各自的主要特性、以及在服务交付上的不同之处。
什么是单页面应用程序?
顾名思义，SPA是在单个页面内，动态地加载网站的各项内容。从本质上讲，用户与页面交互的每一种内容和元素，都会在同一个页面上完成。这意味着，您在浏览此类网站时，无需加载任何单独的文档对象模型(Document Object Models，DOM)。该方法的主要意图是：通过加载用户需要使用和查看的所有内容，让它们保持在同一个页面上，以获取更好的使用体验。
由此带来的好处是，SPA可以避免那些在服务器上渲染各种页面时，所产生的中断问题。它在一定程度上消除了，一直以来困惑在Web开发界的一个问题：如何才能向用户提供无缝的访问体验。当您在SPA上使用页面导航服务时，可能会错误地认为自己访问了不同的DOM。而实际上，您浏览的是由单个DOM所预加载的内容。若想将SPA分成单独的内容部分，我们通常会涉及使用JavaScript视图，为每个部分提供单一的URL。同时，数据链路连接器负责将各个部分链接到主DOM上，并允许您以异步的方式去访问它们。
尽管目前已有Mint和elm-spa等技术的兴起，但是JavaScript仍然是制作SPA的最常用编程语言。JavaScript会使用async/await函数，让用户能够异步加载动态和静态的内容，而不会因为某个输入而阻塞另一个请求的输出。也就是说，SPA能够在非阻塞的输入输出(I/O)系统上流畅运行。目前，诸如ReactJS、Vue.js、AngularJS、Ember.js、以及Backbone.js之类的JavaScript框架，都能够支持SPA的快速开发。为了方便上手，您可以首先从链接--https://www.makeuseof.com/vue-js-beginners-overview/处，获悉有关Vue.js的基本概念。
如今，诸如Netflix、YouTube、PayPal、Facebook、Instagram、Twitter、以及Pinterest之类的明星企业，都从交付速度的角度，相继将其网站服务转换成为了单页面应用。
什么是渐进式Web应用程序?
PWA是由Google于2015年推出的。其目标是通过构建出能够以直接和渐进的方式，与其用户交互的应用程序，实现在网络连接不佳或中断的情况下，保持用户的使用体验。
作为另一种Web应用程序或软件，PWA在其功能中使用了各种标准的、新兴的Web浏览器指南。与SPA的典型初始化内容加载不同，PWA架构主要是通过一些指南，来实现可扩展性、用户适应性、超快速交付、可安装性、以及原生性。总的说来，用户可以流畅地与应用程序进行持续交互。
作为PWA的核心特征之一，可安装性保证了用户可以通过Web浏览器，即时地访问到服务资源，而无需进行任何额外的安装。当然，与任何其他网站一样，PWA也需要被分配一个URL。渐进式Web应用程序的独特之处在于，它们提供了瞬间传送内容的后台助手。据此，您不但可以快速、可靠地获取Web应用页面，而且可以随时能够交互和使用其内容和组件。
目前，以Spotify、Slack、以及Uber为首的明星公司，正在使用着由PWA开发的应用程序。
PWA通常拥有一套通用的架构规则，并且通过包含如下属性，以保证应用的正常运行：
1. Service Worker
Service Worker可以通过介入页面导航、以及用户请求，来轻松地在PWA中交付出各种内容。由于缓存API可以存储针对用户离线请求的各种响应，因此它们能够确保应用程序，即便处于没有网络连接的状态下，也可以加载相关的缓存数据。
而通过使用promise对象，Service Worker可以根据用户的最终请求(同样即便处于离线状态)，交付出已经下载的内容。也就是说，Service Worker使得PWA具有非阻塞性。
2. 安全的上下文
Service Worker需要安全的连接通道(例如HTTPS)，以确保所交付内容的机密性。当您发送请求时，Service Worker会在PWA和浏览器之间，通过建立一个安全通信，来作为安全的上下文(Secure Context)，以防止PWA受到中间人的攻击(MITM)，而产生泄密事件。
3. Web应用的清单文件
作为一个JSON文件，Web清单可以通过定义PWA的基本特征，来详细指明访问、发现和使用PWA内容的各项先决条件。该文件通常包括应用程序的名称、其URL、及其组件。此外，清单文件还会包含将Web应用程序，转换为可安装的应用，所需要的各项信息。
PWA和SPA之间有何相似之处?
虽然PWA和SPA的后台逻辑不同，但它们仍然有着一些共同点。毕竟，它们都旨在通过提供响应式的界面，来改善用户对于网站服务的访问速度和体验。就普通用户而言，他们无法从单纯的界面和交互方式，来分辨这两类技术网站。而且两者都需要向用户提供一个可访问的URL。
SPA和PWA之间的主要区别
PWA和SPA在功能上的差异，主要体现在如下方面：
单页面应用的主要特点
- 它们只能通过浏览器被访问到。
- 尽管并不推荐，但是用户仍可以通过不安全的网络连接(例如HTTP)，以获取服务。
- 它们原则上并不需要服务支持人员。
- 由于SPA并不带有JSON清单文件，因此它们是可卸载的。
- 顾名思义，它们被限制在单页面上。
- 一旦失去网络，它们将无法被访问到。
渐进式Web应用的主要特点
- 由于具有可安装性，因此用户可以通过浏览器访问它们。
- 所有PWA都需要Service Worker，并且它们必须通过安全的网络连接(如HTTPS)，来传输请求。
- 其响应会被缓存，并通过promise对象进行传递。
- 即使在没有网络连接的情况下，它们也可以被访问到。
- 它们的整体速度比SPA更快。
- 由于带有一个清单文件，因此它们具有可下载、可安装、以及易于被访问等特性。
- PWA可能并非只有一个页面。
如何根据交付需求选用SPA和PWA
总的说来，PWA的采用不但改善了一般用户浏览网站的体验，而且降低了企业级应用程序的跳转频率，进而为企业增加营收。另一方面，SPA则使得新媒体应用焕然一新，人们不但可以轻松地通过网络实现彼此交互，而且不会遇到页面加载缓慢等各种窘境。因此，您和您的团队需要根据实际交付需求，为即将构建的应用服务，从中选择合适的技术。
原文标题：What Are Single-Page Applications and Progressive Web Apps?，作者: IDOWU OMISOLA
【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】
