首页 > 其他分享 >渐进式网页应用(PWA)

渐进式网页应用(PWA)

时间:2024-01-04 22:33:17浏览次数:27  
标签:Web 网页 Service Worker 渐进式 应用 PWA 页面

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

  • 站在 Web 应用开发者来说,PWA 提供了一个渐进式的过渡方案,让 Web 应用能逐步具有本地应用的能力。采取渐进式可以降低站点改造的代价,使得站点逐步支持各项新技术,而不是一步到位。
  • 站在技术角度来说,PWA 技术也是一个渐进式的演化过程,在技术层面会一点点演进,比如逐渐提供更好的设备特性支持,不断优化更加流畅的动画效果,不断让页面的加载速度变得更快,不断实现本地应用的特性。

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

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

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

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

  • 首先,Web 应用缺少离线使用能力,在离线或者在弱网环境下基本上是无法使用的。而用户需要的是沉浸式的体验,在离线或者弱网环境下能够流畅地使用是用户对一个应用的基本要求。
  • 其次,Web 应用还缺少了消息推送的能力,因为作为一个 App 厂商,需要有将消息送达到应用的能力。
  • 最后,Web 应用缺少一级入口,也就是将 Web 应用安装到桌面,在需要的时候直接从桌面打开 Web 应用,而不是每次都需要通过浏览器来打开。

针对以上 Web 缺陷,PWA 提出了两种解决方案:通过引入 Service Worker 来试着解决离线存储和消息推送的问题,通过引入 manifest.json 来解决一级入口的问题。

从 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 还有校验机制,通信双方很容易知道数据是否被篡改。

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


标签:Web,网页,Service,Worker,渐进式,应用,PWA,页面
From: https://blog.51cto.com/key3feng/9105569

相关文章

  • 关于 PWA url 参数 ngsw-bypass=true
    "ngsw-bypass-true"这个参数是与AngularServiceWorker(ngsw)相关的一个选项,用于控制在ServiceWorker中是否绕过缓存,直接请求网络资源。在Angular应用中,ServiceWorker主要负责缓存应用的静态资源,以提高应用的性能和用户体验。首先,让我们了解一下AngularServiceWork......
  • 叫板GPT-4的Gemini,我做了一个聊天网页,可图片输入,附教程
    先看效果:简介Gemini是谷歌研发的最新一代大语言模型,目前有三个版本,被称为中杯、大杯、超大杯,GeminiUltra号称可与GPT-4一较高低:GeminiNano(预览访问)为设备端体验而构建的最高效模型,支持离线使用场景。GeminiPro(已推出)性能最佳的模型,具有各种文本和图像推理任务的功......
  • WhatsApp网页版及电脑版登录教学和使用指南
    WhatsApp 作为海外版“微信”,是出海人日常对外沟通的重要桥梁。由于其自身的及时性和便捷性,已经开始逐步替代电子邮件,成为跨境电商和外贸客户沟通的主要工具。为了更好地服务用户,WhatsApp于2015年及2016年分别推出WhatsApp网页版和WhatsApp桌面版,让用户可以直接通过电脑或平板电脑......
  • 解决爬虫无法获取动态网页内容的方法
    随着互联网的发展,许多网站采用了动态网页技术,通过JavaScript等前端技术动态加载内容。对于爬虫来说,获取动态网页的内容可能会变得更加复杂。在这篇文章中,我们将讨论爬虫无法获取动态网页内容的原因,并介绍一些解决方法,以确保我们能够成功获取所需的数据。为什么爬虫无法获取动态网页......
  • django练手系列(五):优化basic.html的功能,增加其它网页引入模板网页后可以变动的部分
    一.折叠basic.html关于导航部分的代码,折叠后如图:二.增加网页可变动部分的方法:增加可变动部分的方法是:在html文件的合适位置插入代码块{%block位置名称%}{%endblock%}引用模板的网页只需要在变动部分写入同样的代码块,即可插入可变动部分。三.增加网页可变动部分......
  • 当然可以。PyScript 是一个 Python 前端框架,它使用户能够在浏览器中使用 HTML 界面构
    当然可以。PyScript是一个Python前端框架,它使用户能够在浏览器中使用HTML界面构建Python程序¹。Vue是一个用于构建用户界面的渐进式框架。PyScript和Vue可以一起使用,以便在Vue组件中编写Python代码,并在Vue组件中使用Python库²。PyCharm是一个流行的Python......
  • 15款高效网页制作工具,助你快速建站!
    冲浪时代大家对网站一定不会陌生,如今,网页制作变得越来越重要,但好消息是,网页制作也变得越来越简单,不仅专业网页设计师能够制作网页,普通用户其实也可以!这一切当然都要得益于网页制作工具的发展和进步啦~本文中,我将为大家分享15款高效网页制作工具,帮助大家快速制作网页,高效创建网站!摹......
  • django 网页引用,路由分发
    1,网页引用1.1HelloWorld目录底下创建templates目录并建立runoob.html文件1.2修改HelloWorld/settings.py,修改TEMPLATES中的DIRS为 [os.path.join(BASE_DIR,'templates')]  2,路由分发#总路由fromapp01importurlsasapp01_urlsfromapp02importurlsas......
  • 【已解决】WordPress安装插件提示:需要访问您网页服务器的权限
    前一段时间把workpress做了迁移后,发现安装插件的时候会给出如下提示: 经过百度查询找到解决方法,修改 /var/www/html/wp-config.php文件,增加字段:define('FS_METHOD','direct');如下图 之后重启服务:systemctlrestarthttpd,即可正常安装插件了,如下 ......
  • Chrome显示和更改显示网页字符集的方法
    Chrome显示和更改显示网页字符集的方法背景前段时间学习和总结了unicode和utf8的一些知识.当时想到应该学习和整理一下网站网页的编码格式字符集相关的内容想着既然给自己立了flag,就应该尽快处理一下.只是一个简单的基本总结chrome的版本好像在比较早的chrome(大概......