浏览器工作原理与实践--渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题

在专栏开篇词中,我们提到过浏览器的三大进化路线:

  • 第一个是应用程序Web化;

  • 第二个是Web应用移动化;

  • 第三个是Web操作系统化;

其中,第二个Web应用移动化是Google梦寐以求而又一直在发力的一件事,不过对于移动设备来说,前有本地App,后有移动小程序,想要浏览器切入到移动端是相当困难的一件事,因为浏览器的运行性能是低于本地App的,并且Google也没有类似微信或者Facebook这种体量的用户群体。

但是要让浏览器切入到移动端,让其取得和原生应用同等待遇可是Google的梦想,那该怎么做呢?

这就是我们本节要聊的PWA。那什么是PWA?PWA又是以什么方式切入到移动端的呢?

PWA,全称是Progressive Web App,翻译过来就是渐进式网页应用。根据字面意思,它就是“渐进式+Web应用”。对于Web应用很好理解了,就是目前我们普通的Web页面,所以PWA所支持的首先是一个Web页面。至于“渐进式”,就需要从下面两个方面来理解。

  • 站在Web应用开发者来说,PWA提供了一个渐进式的过渡方案,让Web应用能逐步具有本地应用的能力。采取渐进式可以降低站点改造的代价,使得站点逐步支持各项新技术,而不是一步到位。

  • 站在技术角度来说,PWA技术也是一个渐进式的演化过程,在技术层面会一点点演进,比如逐渐提供更好的设备特性支持,不断优化更加流畅的动画效果,不断让页面的加载速度变得更快,不断实现本地应用的特性。

从这两点可以看出来,PWA采取的是非常一个缓和的渐进式策略,不再像以前那样激进,动不动就是取代本地App、取代小程序。与之相反,而是要充分发挥Web的优势,渐进式地缩短和本地应用或者小程序的距离。

那么Web最大的优势是什么呢?我认为是自由开放,也正是因为自由和开放,所以大家就很容易对同一件事情达成共识,达成共识之后,一套代码就可以运行在各种设备之上了,这就是跨平台,这也恰恰是本地应用所不具备的。而对于小程序,倒是可以实现跨平台,但要让各家达成共识,目前来看,似乎还是非常不切实际的。

所以我给PWA的定义就是:它是一套理念,渐进式增强Web的优势,并通过技术手段渐进式缩短和本地应用或者小程序的距离。基于这套理念之下的技术都可以归类到PWA。

那今天我们就主要来聊聊PWA主要采用了哪些技术手段来缩短它和本地应用或者小程序的距离。

Web应用 VS 本地应用

那相对于本地应用,Web页面到底缺少了什么?

  • 首先,Web应用缺少离线使用能力,在离线或者在弱网环境下基本上是无法使用的。而用户需要的是沉浸式的体验,在离线或者弱网环境下能够流畅地使用是用户对一个应用的基本要求。

  • 其次,Web应用还缺少了消息推送的能力,因为作为一个App厂商,需要有将消息送达到应用的能力。

  • 最后,Web应用缺少一级入口,也就是将Web应用安装到桌面,在需要的时候直接从桌面打开Web应用,而不是每次都需要通过浏览器来打开。

针对以上Web缺陷,PWA提出了两种解决方案:通过引入Service Worker来试着解决离线存储和消息推送的问题,通过引入manifest.json来解决一级入口的问题。下面我们就来详细分析下Service Worker是如何工作的。

什么是Service Worker

我们先来看看 Service Worker是怎么解决离线存储和消息推送的问题。

其实在Service Worker之前,WHATWG小组就推出过用App Cache标准来缓存页面,不过在使用过程中App Cache所暴露的问题比较多,遭到多方吐槽,所以这个标准最终也只能被废弃了,可见一个成功的标准是需要经历实践考量的。

所以在2014年的时候,标准委员会就提出了Service Worker的概念,它的主要思想是在页面和网络之间增加一个拦截器,用来缓存和拦截请求。整体结构如下图所示:

Service Worker结构示意图

在没有安装Service Worker之前,WebApp都是直接通过网络模块来请求资源的。安装了Service Worker模块之后,WebApp请求资源时,会先通过Service Worker,让它判断是返回Service Worker 缓存的资源还是重新去网络请求资源。一切的控制权都交由Service Worker来处理。

Service Worker的设计思路

现在我们知道Service Worker的主要功能就是拦截请求和缓存资源,接下来我们就从Web应用的需求角度来看看Service Worker的设计思路。

1. 架构

通过前面页面循环系统的分析,我们已经知道了JavaScript和页面渲染流水线的任务都是在页面主线程上执行的,如果一段JavaScript执行时间过久,那么就会阻塞主线程,使得渲染一帧的时间变长,从而让用户产生卡顿的感觉,这对用户来说体验是非常不好的。

为了避免JavaScript过多占用页面主线程时长的情况,浏览器实现了Web Worker的功能。Web Worker的目的是让JavaScript能够运行在页面主线程之外,不过由于Web Worker中是没有当前页面的DOM环境的,所以在Web Worker中只能执行一些和DOM无关的JavaScript脚本,并通过postMessage方法将执行的结果返回给主线程。所以说在Chrome中, Web Worker其实就是在渲染进程中开启的一个新线程,它的生命周期是和页面关联的。

“让其运行在主线程之外”就是Service Worker来自Web Worker的一个核心思想。不过Web Worker是临时的,每次JavaScript脚本执行完成之后都会退出,执行结果也不能保存下来,如果下次还有同样的操作,就还得重新来一遍。所以Service Worker需要在Web Worker的基础之上加上储存功能。

另外,由于Service Worker还需要会为多个页面提供服务,所以还不能把Service Worker和单个页面绑定起来。在目前的Chrome架构中,Service Worker是运行在浏览器进程中的,因为浏览器进程生命周期是最长的,所以在浏览器的生命周期内,能够为所有的页面提供服务。

2. 消息推送

消息推送也是基于Service Worker来实现的。因为消息推送时,浏览器页面也许并没有启动,这时就需要Service Worker来接收服务器推送的消息,并将消息通过一定方式展示给用户。关于消息推送的细节这里我们就不详述了,如果你感兴趣的话可以自行搜索相关资料去学习。

3. 安全

基于Web应用的业务越来越多了,其安全问题是不可忽视的,所以在设计Service Worker之初,安全问题就被提上了日程。

关于安全,其中最为核心的一条就是HTTP。我们知道,HTTP采用的是明文传输信息,存在被窃听、被篡改和被劫持的风险,在项目中使用HTTP来传输数据无疑是“裸奔”。所以在设计之初,就考虑对Service Worker采用HTTPS协议,因为采用HTTPS 的通信数据都是经过加密的,即便拦截了数据,也无法破解数据内容,而且HTTPS还有校验机制,通信双方很容易知道数据是否被篡改。关于HTTPS协议,我们会在最后的安全模块详细介绍。

所以要使站点支持Service Worker,首先必要的一步就是要将站点升级到HTTPS。

除了必须要使用HTTPS,Service Worker还需要同时支持Web页面默认的安全策略,诸如同源策略、内容安全策略(CSP)等,关于这些,后续我们也会详细介绍。

总结

好了,今天就介绍到这里,下面我来总结下本文的主要内容。

我们先分析了PWA,它是由很多技术组成的一个理念,其核心思想是渐进式。对于开发者,它提供了非常温和的方式,让开发者将普通的站点逐步过渡到Web应用。对于技术本身而言,它是渐进式演进,逐渐将Web技术发挥到极致的同时,也逐渐缩小和本地应用的差距。在此基础上,我们又分析了PWA中的Service Worker的设计思路。

另外,PWA 还提供了 manifest.json 配置文件,可以让开发者自定义桌面的图标、显示名称、启动方式等信息,还可以设置启动画面、页面主题颜色等信息。关于manifest.json的配置还是比较简单的,详细使用教程网上有很多,这里我就不做介绍了。

添加桌面标、增加离线缓存、增加消息推送等功能是PWA走向设备的必备功能,但我认为真正决定PWA能否崛起的还是底层技术,比如页面渲染效率、对系统设备的支持程度、WebAssembly等,而这些技术也在渐进式进化过程中。所以未来如何,我们拭目以待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/804443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【免费SSL】免费一年的SSL证书

一、SSL证书行业政策 目前市面上绝大多数的免费SSL证书有效期都在3个月左右,而不是一年。例如,腾讯云在2024年4月后不再提供有效期为一年的免费证书,改为提供有效期为3个月的免费证书。同样,阿里云在2023年11月后也不再提供有效期…

javaScript常见对象方法总结

1,object.assign() 用于合并对象的属性。它可以将一个或多个源对象的属性复制到目标对象中,实现属性的合并。 语法 Object.assign(target, ...sources); 1,target:目标对象,将属性复制到该对象中。 2,sources:一个…

51单片机学习笔记16 小型直流电机和五线四相电机控制

51单片机学习笔记16 小型直流电机和五线四相电机控制 一、电机分类二、小型直流电机控制1. 简介2. 驱动芯片ULN2003D3. 代码实现dc_motor_utils.cmain.c 三、五线四相步进电机控制1. 步进电机工作原理2. 构造3. 极性区分4. 驱动方式5. 28BYJ-48步进电机(1&#xff0…

3D可视化技术亮相高铁站,引领智慧出行新潮流

在科技飞速发展的今天,我们的生活正经历着前所未有的变革。高铁站作为现代交通的重要枢纽,也在不断地创新和进步。 3D可视化技术通过三维立体的方式,将高铁站内部和外部的结构、设施、流线等以更加直观、生动的形式呈现出来。乘客们只需通过手…

幸运的彩票

题目描述 彩票的号码有 6 位数字,若一张彩票的前 3 位上的数之和等于后 3 位上的数之和,则称这张彩票是幸运的。本题就请你判断给定的彩票是不是幸运的。 输入格式 输入在第一行中给出一个正整数 N(≤ 100)。随后 N 行&#xff0…

Docker容器嵌入式开发:MySQL表的外键约束及其解决方法

本文内容涵盖了使用MySQL创建数据库和表、添加数据、处理字符集错误、解决外键约束问题以及使用SQL查询数据的过程。通过创建表、插入数据和调整字符集等操作,成功解决了数据库表中的字符集问题,并使用INSERT语句向各个表中添加了示例数据。同时&#xf…

MySQL - MySQL的RR隔离级别是如何基于ReadView机制实现的?

RR级别下,这个事务读取一条数据,无论读多少次,都是一个值,别的事务修改数据之后,哪怕提交了,你也是看不到人家修改的值的,这就避免了不可重复读的问题。 同时如果别的事务插入了一些新的数据,你也是读不到的,这样就可以避免幻读问题。这到底是如何实现的呢? 首先我…

《深入Linux内核架构》第1章 简洁和概述

目录 1.1 内核的任务 1.2 实现策略 1.3 内核的组成部分 ​1.3.1 进程、进程切换、调度 1.3.2 UNIX 进程 1.3.3 地址空间和特权级别 1.3.4 页表 1.3.5 物理内存的分配 1.3.6 计时 1.3.7 系统调用 1.3.8 设备驱动程序 1.3.9 网络 1.3.10 文件系统 1.3.11 模块和热插…

LangChain - Output Parsers

文章目录 一、输出解析器 (Output Parsers)快速入门 二、列表解析器三、datetime 日期时间解析器四、枚举解析器五、自动修复解析器六、Pydantic(JSON)解析器七、重试解析器八、结构化输出解析器 structured 转载改编自: https://python.lang…

AIGC实战——StyleGAN(Style-Based Generative Adversarial Network)

AIGC实战——StyleGAN 0. 前言1. StyleGAN1.1 映射网络1.2 合成网络1.3 自适应实例归一化层1.4 风格混合1.5 随机变化 2. StyleGAN 生成样本3. StyleGAN23.1 权重调制与解调3.2 路径长度正则化3.3 非渐进式增长 4. StyleGAN2 生成样本小结系列链接 0. 前言 StyleGAN (Style-Ba…

【LeetCode热题100】【二叉树】对称二叉树

题目链接:101. 对称二叉树 - 力扣(LeetCode) 递归解决,如果都空那么相等,否则有一个为空那么不相等,剩下就是都不为空,判断元素是否相等,接着递归判断左边的左子树是否等于右边的右…

安卓的认证测试

1 CTS CTS 是 Android 兼容性测试套件,用于验证设备是否符合 Android 平台的兼容性标准。它包含一系列测试用例,涵盖了设备的各个方面,如硬件功能、软件功能、API 的正确实现等。通过 CTS 测试,设备厂商可以确保其设备符合 Andro…

软件工程、微服务架构风格的概念以及实际应用

微服务架构风格的概念 微服务架构是一种将一个应用程序作为一套小的服务的开发风格,每个服务运行在其自己的进程中,并通常围绕着业务能力组织。这些服务可以通过轻量级的通信机制(通常是HTTP RESTful API)相互独立部署、扩展和维…

Accuracy准确率,Precision精确率,Recall召回率,F1 score

真正例和真反例是被正确预测的数据,假正例和假反例是被错误预测的数据。然后我们需要理解这四个值的具体含义: TP(True Positive):被正确预测的正例。即该数据的真实值为正例,预测值也为正例的情况&#xf…

python-pytorch使用日志0.5.007

python-pytorch使用日志 1. optimizer.zero_grad()和model.zero_grad()的区别2. cbow和skip-gram的训练数据格式3. 获取cbow和skip-gram训练后的中文词向量4. 获取到词向量后可以做什么5. 余弦相似度结果的解释 1. optimizer.zero_grad()和model.zero_grad()的区别 都是清空模…

学习笔记:解决拖延

1 解决拖延,减轻压力的关键心态和方法 1.1 要点梳理 拖延是因为自己一直在逃避,重点是要有效突破逃避圈,进入学习圈,扩展成长圈。 毒蛇曲线(见思维导图)中越是临近截止期限,拖延的焦虑越上升…

VRRP虚拟路由实验(思科)

一,技术简介 VRRP(Virtual Router Redundancy Protocol)是一种网络协议,用于实现路由器冗余,提高网络可靠性和容错能力。VRRP允许多台路由器共享一个虚拟IP地址,其中一台路由器被选为Master,负…

UML 架构图入门介绍 starUML

拓展阅读 常见免费开源绘图工具 OmniGraffle 创建精确、美观图形的工具 UML-架构图入门介绍 starUML UML 绘制工具 starUML 入门介绍 PlantUML 是绘制 uml 的一个开源项目 UML 等常见图绘制工具 绘图工具 draw.io / diagrams.net 免费在线图表编辑器 绘图工具 excalidr…

C++初阶:6.string类

string类 string不属于STL,早于STL出现 看文档 C非官网(建议用这个) C官网 文章目录 string类一.为什么学习string类?1.C语言中的字符串2. 两个面试题(暂不做讲解) 二.标准库中的string类1. string类(了解)2. string类的常用接口说明(注意下面我只讲解…

设计模式总结-装饰者模式

模式动机 一般有两种方式可以实现给一个类或对象增加行为: 继承机制,使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法。但是这种方法是静态的,用户不能控制增…