什么是 PWA
PWA (Progressive Web App) 是 Web 应用程序的新一代标准，在 PC 和移动端都能使用。PWA 应用不用像传统的 Web 应用那样需要安装，可以直接从浏览器上访问。PWA 应用可以像原生应用一样离线运行，可以在主屏增加图标，并能融合到操作系统的通知和分享机制中。
为什么要优化 PWA 应用
虽然 PWA 应用存在各种优点，但是在实际开发中可能会遇到很多问题。例如：缓存的文件生命周期不对，导致始终使用旧版本。这样就会影响 PWA 应用的体验。
Lighthouse 是由 Google 开发的一款用于评估 PWA 应用质量的工具。他可以评估一个 Web 应用程序的性能、可访问性、可靠性、最佳实践和 PWA 应用方面。通过使用 Lighthouse，你可以找到你的 PWA 应用的不足之处，并进行优化，以获得更好的体验。
如何使用 Lighthouse 评估 PWA 应用质量
Lighthouse 可以通过 Chrome 开发者工具来进行评估。在网站打开后，打开开发者工具，然后单击 Lighthouse 选项卡。Lighthouse 还可以以命令行的形式使用。
---------- ------------------------------------
下面是一个示例代码：
--------- -----
----- ----------
------
----- ----------------
---------- ---------------
----- -------------- ----------------------
-------
------
---------- ---------
------- -- - ------ --- ------------
------- -------------------------
-------
-------这里，我们只使用了一个简单的 HTML 页面来演示。但是我们可以将其转换为 PWA 应用程序。
-
------- ---- ---------
------------- ------
------------ ----
---------- -------------
------------------- -------
-------------- ------
-这是我们创建的 manifest.json 文件。在这里，我们指定了应用程序的名称、主屏幕图标、启动 URL、显示模式、背景颜色和主题颜色。实际上，这个文件非常重要。这是以其描述应用程序外观、体验和功能的元数据。
如何优化 PWA 应用
改进可访问性和可读性
评估和改进你的应用程序的可访问性和可读性对于一个优秀的 PWA 应用尤为重要。如果你的应用程序难以使用或读取，那么它的可靠性、性能和最佳做法的其他方面也将受到影响。
Lighthouse 会评估 PWA 应用的可访问性和可读性，并给出优化建议。
改善页面加载性能
PWA 应用程序最好具有快速的加载速度。这有两个原因。首先，通过提供更快的服务，你可以改善用户的体验，并使你的 PWA 应用更具可靠性。其次，较慢的速度可能导致用户在等待页面加载结束的过程中失去耐心。
Lighthouse 可以优化页面加载速度的建议，如利用 service worker 的缓存机制等。
使用 Tags 远程模块缓存
浏览器对服务工作人员和缓存的支持使其成为开发高速，离线应用程序的理想选择。通过使用 cache API 缓存“骨干”文件，你可以为你的 PWA 应用程序打下坚实的基础。缓存骨干文件会加速“第一次啜饮”的私现，即应用程序第一次加载到用户设备中。通过尽早缓存骨干文件，我们可以在用户完成您的 PWA 应用程序的“第一次味道”之前将其呈现给他们。
-
------- ---- ---------
------------- ------
------------ ----
---------- -------------
------------------- -------
-------------- -------
-------- --------
---------------- -
------ ---------
-------- --------
------- --------
--
----------- -
-
------- -------------
------ ---------------------------------------------------------------------
-
-
-总结
通过使用 Lighthouse，你可以找到你的 PWA 应用程序的不足之处，并进行优化，以获得更好的体验。通过使用标签缓存，我们可以加速“第一次啜饮”的私现。通过在清单中包含线上 URL 作用域，我们可以纳入离线缓存工作范围的所有文件。
优化您的 PWA 应用程序将使其更具可靠性、性能和最佳实践方面。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b210f448841e9894e6432b