当今互联网环境下，越来越多的网站采用 PWA 技术开发。PWA（Progressive Web App）是一种能够提供类似于 Native App 的用户体验的 Web 应用程序。但是，开发 PWA 应用也需要考虑许多方面如性能、可访问性、离线功能等。为了帮助开发人员评估已开发 PWA 应用的质量，Google 推出了一个免费工具——Lighthouse。
Lighthouse 是一个实用的 Chrome 插件，它使用 Google 开发的自动化测试工具来检查 Web 应用程序的质量，并返回针对性的性能优化建议。本文将介绍 Lighthouse 的功能、使用以及如何针对返回的报告进行优化。
1. 功能介绍
Lighthouse 可以评估 PWA 应用程序的性能、可访问性、最佳实践、搜索引擎优化（SEO）、离线内容以及其他方面。以下是 Lighthouse 可以评估的一些方面：
- 性能：加载时间、响应速度和缓存机制
- 可访问性：Web 应用程序是否可访问，例如闭眼测试（闭上眼睛使用屏幕阅读器是否可以轻松使用）
- 最佳实践：是否采用最佳实践，如通过 HTTPS 访问网站
- SEO：是否充分利用了元数据，例如页面描述、关键词标签等
- 离线内容：应用程序是否可以离线工作，例如通过 Service Workers 实现离线缓存
2. 使用方法
为了使用 Lighthouse，首先需要在 Chrome 浏览器中安装该插件。安装完成后，在开发环境中打开需要评估的 Web 应用程序。然后，按下 Chrome 浏览器中的 F12，该应用程序会显示在开发工具窗口中。
要使用 Lighthouse 评估应用程序，可以使用几种方法：
在 Chrome 开发工具窗口中，点击「Audits」选项卡，然后点击「Run audits」按钮。Lighthouse 将自动从 Chrome 浏览器中运行，并返回诊断结果。
在 Chrome 地址栏中输入 chrome://lighthouse 并按下回车键打开 Lighthouse，然后在打开的窗口中输入需要评估的网页地址。点击「Generate report」按钮生成报告。
在 Chrome 地址栏中输入需要评估的网页地址，然后右键点击页面，选择「Lighthouse」选项以调用 Lighthouse 并返回诊断结果。
3. 报告解读
当 Lighthouse 运行结束后，它会返回一个类似于以下图示的报告。
在报告中，可以查看每个测试类别的得分和具体检查项目。在这个例子中，该应用程序在所有测试类别中得分较高，并且没有大问题。
4. 优化建议
除了报告外，Lighthouse 还会提供定制化的性能优化建议供开发者采用。当浏览器返回一个优化建议时，Lighthouse 可以提供几个选项：
- 资源引用提示：找出哪个资源在您的应用程序中出现的次数最多
- 代码跟踪提示：查看您的 JavaScript 代码运行的情况
- 段域统计提示：查询可通过使用 segment 的 HTTP 响应缓存来优化的请求
开发人员可以针对 Lighthouse 返回的建议进行更深入地思考和优化，以提高 PWA 应用程序的表现和质量。
5. 示例代码
为了演示如何使用 Lighthouse 评估您的 PWA 应用程序以及如何针对其返回的结果进行优化，我们将提供一个简单的示例 PWA 应用程序代码。代码由一个简单的 Service Worker（sw.js）和一个简单的应用程序入口点（app.js）组成。
sw.js
-- -------------------- ---- -------
----- ---------- - -----------------
----- ----------- - -
----
-------------------
------------------
------------------
--
-- ------
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
-- --------------
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
------ ---------------------
-
-
--
---
-- ----
--------------------------------- --------------- -
----- -------------- - -------------
----------------
--------------------------------------- -
------ ------------
---------------------------------- -
-- ---------------------------------- --- --- -
------ -------------------------
-
--
--
--
--
---app.js
if ('serviceWorker' in navigator) {
// 注册 Service Worker
navigator.serviceWorker.register('/sw.js', { scope:'/'}).then(function(registration) {
console.log('Service worker registered:', registration);
}).catch(function(error) {
console.log('Service worker registration failed:', error);
});
}在这个例子中，Service Worker 会缓存全部资源以提高访问速度。该 Service Worker 还处理了离线访问。应用程序入口点加载 Service Worker，使其能够工作并缓存全部资产。
结论
Lighthouse 是一个易用的工具，可以帮助开发人员评估 PWA 应用程序的质量并提供有价值的性能和优化建议。当开发者使用 Lighthouse 时，他们可以针对性的改进应用程序，并进一步优化性能从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710d25ead1e889fe2fc389a