PWA-H5 Web App优化探索之路(Service Worker,Lighthouse)
PWA是什么?
Progressive Web App 渐进式web应用程序,简单来说,就是可以让你的WEB App,带来与原生App相媲美的用户体验。。
为什么要用PWA?
简单来说,是为了web应用更好的用户体验。
- 当你的web页面处于离线或者弱网情况,可以调用预先缓存资源,使你的应用正常加载。
- 部分资源无需经过网络,页面秒开。
- 你的页面可以被搜索引擎收录。
- 可以通过message进行离线消息推送。
- 应用可以被添加到手机桌面,像原生应用一样可以全屏,推送
怎么用PWA?
- 使用HTTPS
- 使用Service Worker技术(下文有详细介绍),实现离线加载技术
- 把我们需要离线的文件放到App Mainfest文件代码中
PWA目前浏览器支持情况点击直达兼容性查询页
不同平台分别最适合体验 PWA 应用的浏览器:
Android:Chrome 浏览器
iOS:Safari 浏览器
Windows 10:Edge 浏览器 / Chrome 浏览器 / Stack 浏览器
macOS:Chrome 浏览器 / Stack 浏览器
Linux:Chrome 浏览器
关于pwa图文介绍以及使用体验的资料可参考
ServiceWorkerGlobalScope API
WEB App Mainfest
Service Worker 是什么?
Service Worker 是浏览器独立于当前网页,在后台运行的一个脚本。作用有以下几点
- 拦截和处理网络请求,刷新页面可以通过缓存,页面秒开
- 使用Service Worker 在后台运行,实现处理大规模后台数据的功能,不影响前端页面,数据处理同时可以和前端页面进行通信
- 仅在激活情况下,才会针对系统事件抓取资源,非激活情况下,不占用系统资源
Service Worker工具备注,使用下面两个指令,可以查询到我们已经启动的,和浏览器内置的Service Worker
- chrome://serviceworker-internals/
- chrome://inspect/#service-workers
使用service-worker缓存页面内容
首次加载
点击刷新以后
使用service-worker发送消息
使用第一个窗口发送消息
我们在第二和第三个窗口都看到了第一个窗口发送的消息
关于上图 service-worker缓存页面,以及不同页面发送message代码地址
https://gitee.com/tangdd369098655/service_worker.git
查看当前网站是用哪个文件注册的Service Worker
如何测试你的页面性能?Lighthouse 前端性能优化测试工具
- 分析Web应用,收集各种应用指标,并进行评估,以此我们可以根据评估结果进行针对性优化,不断提升用户体验
- 目前官方提供了4种使用方式: - Chrome 开发者工具(DevTools) - Chrome 扩展 - Node CLI - Node Module
- 详细文档可以参考[https://github.com/GoogleChrome/lighthouse](Lighthouse github)
使用Chrome 开发者工具,接下来我们以手机淘宝为例,来看一下页面性能
打开开发者工具-点击 generate report,它会对页面进行相关性能的检查,最终生成报告
切换语言~~
各个方面得分情况
PWA分析报告
- 经过分析,我们可以得到 该案例关于PWA分析 如下结果
PWA-H5 Web App优化探索之路(Service Worker,Lighthouse)的更多相关文章
- PWA(Progressive Web App)入门系列:(一)PWA简单介绍
前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progr ...
- [PWA] Add web app to your Home Screen
Clone: Link Modify the structure: Move css, js, image, index.html to an 'app' folder. manifest.json: ...
- PWA全称Progressive Web App,即渐进式WEB应用?
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能解决了哪些问题 ...
- Service Worker的应用
Service Worker的应用 Service worker本质上充当Web应用程序.浏览器与网络(可用时)之间的代理服务器,这个API旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来 ...
- PWA渐进式web应用
PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...
- JavaScript是如何工作的:Service Worker的生命周期及使用场景
摘要: 理解Service Worker. 原文:JavaScript 是如何工作的:Service Worker 的生命周期及使用场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...
- Progressive web app理念及发展前景
前一段时间微信推出微信小程序进行公测,着实火了一把,博得了大众的眼球,不明真相的吃瓜观众们纷纷围观,所谓的“微信小程序”,通俗的讲就是一种不需要下载安装即可使用的应用程序,脱离于app商店依托于浏览器 ...
- 转《service worker在移动端H5项目的应用》
1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术,也不是一个框架,我们可以把她理解为一种模式,一种通过应用一些技术将 Web App ...
- service worker在移动端H5项目的应用
1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术,也不是一个框架,我们可以把她理解为一种模式,一种通过应用一些技术将 Web App ...
随机推荐
- python3使用mutagen进行音频元数据处理
python版本:python 3.9 mutagen版本:1.46.0 mutagen是一个处理音频元数据的python模块,支持多种音频格式,是一个纯粹的python库,仅依赖python标准 ...
- SpringBoot自动配置(装配)流程
源码分析 SpringBoot自动配置流程 首先,我们要了解在@SpringBootApplication注解的内部,还具有@EnableAutoConfiguration,@SpringBo ...
- 中小型企业综合项目(Nginx+LVS+Tomcat+MGR+Nexus+NFS)
Nginx+Tomcat+Mysql综合实验 1.环境准备 服务器 IP地址 作用 系统版本 数据库服务器1 192.168.100.111 MGR集群数据库master节点 Rocky8.6 数据库 ...
- 记录一次Oracle导入数据库失败的解决办法,最终报错:UDI-04045、ORA-04045、ORA-01775
费了很大的工夫,终于解决了.做个记录. ******************************************************************************** ...
- spring源码解析(二) 结合源码聊聊FactoryBean
一.什么是FactoryBean FactoryBean是由spring提供的用来让用户可以自定bean创建的接口:实现该接口可以让你的bean不用经过spring复杂的bean创建过程,但同时也能做 ...
- K8s集群环境搭建
K8s集群环境搭建 1.环境规划 1.1 集群类型 Kubernetes集群大体上分为两类:一主多从和多主多从 一主多从:一台master节点和多台node节点,搭建简单,但是有单机故障风险,适用于测 ...
- Window10开机键盘映射
一.映射工具 1.github地址 https://github.com/susam/uncap 2.映射方式 (1)CapsLock映射成ESC键 uncap 0x1b:0x14 (2)CapsLo ...
- Centos7 mysql网络源安装范例(其他系统也可参考)
1. 以下是一个通配的el7系列的yum源,可适应aarch64,x86_64,i386内核,但是可能会慢一点 # cat > /etc/yum.repos.d/mysql-community. ...
- 从 Numpy+Pytorch 到 TensorFlow JS:总结和常用平替整理
demo展示 这是一个剪刀石头布预测模型,会根据最近20局的历史数据训练模型,神经网络输入为最近2局的历史数据. 如何拥有较为平滑的移植体验? 保持两种语言,和两个框架的API文档处于打开状态,并随时 ...
- 【devexpress】Gridcontorl分组时自定义底部页脚求和功能
再使用Gridcontorl的时候页脚的求和平时用起来都是非常方便的.不过有的时候需要普通的求和无法满足我们就可以通过自定义的方式来进行 第一种方法 使用求和的两列数据的总额进行计算毛利率百分比.在绑 ...