|
|
|
|
公众号矩阵

单页面应用(SPA)和渐进式Web应用(PWA)有哪些区别?

本文将和您讨论单页面应用(SPA)和渐进式Web应用(PWA)的基本工作原理,两者之间的同异之处,并最终给出如何选用的建议。

作者:陈峻来源:51CTO|2021-07-22 09:00

【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上,并允许您以异步的方式去访问它们。

尽管目前已有Mintelm-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】

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. Spark 大数据处理最佳实践
  3. JavaWEB(JSP-Servlet)工程师视频
  4. 醒哥Java系列-JavaWeb基础与高级
  5. 今天,我们来实现一个基础版的Webpack
  6. 痛苦调优10小时,我把 Spark 脚本运行时间从15小时缩短到12分钟!
【责任编辑:华轩 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

32人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

12人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

41人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微