PWA-H5 Web App优化探索之路(Service Worker,Lighthouse)

语言: CN / TW / HK

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图文介绍以及使用体验的资料可参考

全平台的轻量体验:PWA 使用指南及应用推荐

ServiceWorkerGlobalScope API

O(∩_∩)O

O(∩_∩)O

WEB App Mainfest

O(∩_∩)O

O(∩_∩)O

Service Worker 是什么?

Service Worker 是浏览器独立于当前网页,在后台运行的一个脚本。作用有以下几点

  • 拦截和处理网络请求,刷新页面可以通过缓存,页面秒开
  • 使用Service Worker 在后台运行,实现处理大规模后台数据的功能,不影响前端页面,数据处理同时可以和前端页面进行通信
  • 仅在激活情况下,才会针对系统事件抓取资源,非激活情况下,不占用系统资源

Service Worker工具备注,使用下面两个指令,可以查询到我们已经启动的,和浏览器内置的Service Worker

  • chrome://serviceworker-internals/
  • chrome://inspect/#service-workers

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

使用service-worker缓存页面内容

首次加载

点击刷新以后

使用service-worker发送消息

使用第一个窗口发送消息

我们在第二和第三个窗口都看到了第一个窗口发送的消息

关于上图 service-worker缓存页面,以及不同页面发送message代码地址

https://gitee.com/tangdd369098655/service_worker.git

查看当前网站是用哪个文件注册的Service Worker

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

如何测试你的页面性能?Lighthouse 前端性能优化测试工具

  • 分析Web应用,收集各种应用指标,并进行评估,以此我们可以根据评估结果进行针对性优化,不断提升用户体验
  • 目前官方提供了4种使用方式: - Chrome 开发者工具(DevTools) - Chrome 扩展 - Node CLI - Node Module
  • 详细文档可以参考https://github.com/GoogleChrome/lighthouse

使用Chrome 开发者工具,接下来我们以手机淘宝为例,来看一下页面性能

打开开发者工具-点击 generate report,它会对页面进行相关性能的检查,最终生成报告

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

切换语言~~

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

各个方面得分情况

O(∩_∩)O

O(∩_∩)O

PWA分析报告

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

  • 经过分析,我们可以得到 该案例关于PWA分析 如下结果

O(∩_∩)O

O(∩_∩)O

在这里插入图片描述