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分析 如下结果
🌸
🌸
