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 ...
随机推荐
- Linux之Docker-01
一.镜像基础命令 1.docker version [root@DY-Ubuntu-01 ~]#docker version #查看 Docker 版本 2.docker ...
- letcode-学习-数组去重
数组去重 问题描述: 给你一个 升序排列 的数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度.元素的 相对顺序 应该保持 一致 . 由于在某些语言中不 ...
- git ignore忽略规则
目录 Git 忽略文件提交的方法 Git 忽略规则 Git 忽略规则优先级 Git 忽略规则匹配语法 常用匹配示例 多级目录忽略规则设置 .gitignore规则不生效 参考文章 Git 忽略文件提交 ...
- Swagger的介绍
一.Swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 二.Swagger 的优势? 支持 API 自动生成同步的在线 ...
- Git 实战分支版本管理策略 | TBD++ Flow
简介 随着Git的普及,为了更高效地进行团队协作开发,人们通过经验总结研究出了几套适用于各种团队和项目的分支管理策略,上篇文章我们讲解了 Git Flow 代码版本管理策略,它对版本控制较为严格,主 ...
- openssh编译rpm包（防火防盗防漏扫）
参考链接:https://www.jianshu.com/p/0882b0502960 openssh下载链接: wget https://cdn.openbsd.org/pub/OpenBSD/Op ...
- x=x+=x-=x-x;
int x=10; x=x+=x-=x-x; // x=x+(x-(x-x)) System.out.println(x); 输出结果20
- Pandas_1_预备知识
Chapter1_Python基础 1.1 Python基础 推导式: 两个对象之间的映射关系,类似于实数之间关系变换的函数,只不过对象变成了矩阵. # Ex1-1 vacabulary = ['co ...
- linux基础第二部分
一.Linux命令执行过程 先判断是否是别名,如果是直接执行,不是看是否是内部命令 如果是内部命令,直接执行,不是看hash表 hash表中有源文件直接执行,找不到报错 若hash表中不存在去外部规定 ...
- .NET 云原生架构师训练营（基于 OP Storming 和 Actor 的大型分布式架构一）--学习笔记
目录 为什么我们用 Orleans Dapr VS Orleans Actor 模型 Orleans 的核心概念 为什么我们用 Orleans 分布式系统开发.测试的难度(服务发现.通信) 运维的复杂 ...