超详细的图文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目前浏览器支持情况点击直达兼容性查询页

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

🌸

🌸