PWA（Progressive Web App）是一种结合了 Web 和 Native App 特性的应用模式，PWA 应用具备可靠性、快速响应、离线缓存等优秀的用户体验，深受广大开发者和用户的喜爱。而缓存是 PWA 应用中的一个关键特性，它可以有效地提升应用的性能，减少网络请求，提高用户体验。
本文将介绍 PWA 应用中常用的缓存策略和最佳实践，并通过代码示例让读者深入了解如何有效地使用缓存提升 PWA 应用的性能和用户体验。
缓存策略
我们知道，浏览器在访问 PWA 应用时会从缓存中读取资源，从而减少网络请求。然而，我们需要根据不同的资源类型和请求方式，选择合适的缓存策略，优化应用的性能。
App Shell
App Shell 是一种将应用界面的基础结构（HTML、CSS、JS）缓存到本地的策略，目的是在网络状况差或者离线情况下，快速展示出应用的基础结构。App Shell 的缓存包括应用的基础布局、导航、视图等，通常不会包括具体的数据。App Shell 的缓存不仅可以提升用户体验，还可以减少网络请求，降低服务器压力。
缓存具体实现方式可以使用 Service Worker，将基础 Shell 缓存到 client 端，确保用户打开应用时能够快速展示。
数据缓存
除了应用程序的基础结构外，应用程序中的数据也可以被缓存到用户设备中。用过各种数据缓存策略，可以减轻服务器压力，避免在用户离线的情况下无法使用应用。我们可以结合缓存策略、存储方式和数据更新策略，制定出最优化的数据缓存方案。
常用的数据缓存策略有：网络优先（优先从远程服务器获取最新数据）、缓存优先（优先使用本地缓存数据，并定时更新）以及缓存优先，同时进行数据更新（减少等待时长）。
常用的数据缓存存储方式有 IndexedDB 和 WebSQL，我们可以根据不同情况选择适合的存储方式和更新策略。
最佳实践
在了解了 PWA 应用中的缓存策略之后，我们应该如何制定最佳实践呢？以下指导意义可以供开发者参考：
尽量减少不必要的网络请求，选择合适的缓存策略，优化应用的性能。
选择合适的存储方式和更新策略，减轻服务器压力，减少用户等待时长。注意：对于需要定期刷新的数据，设置合适的刷新间隔，避免浪费带宽和时间。
上线前，在不同网络情况下进行性能测试，优化应用的缓存性能。尽可能在应用程序的大部分区域使用缓存，同时保证数据的实时性。
缓存失效时要进行容错处理，保证应用正常运行。
示例代码
下面是一个简单的使用 Service Worker 实现的 app shell 代码示例:
-- -------------------- ---- -------
---- --------
-- -- --- -----
----- ---------- - ----------------------
----- ----------- - -
----
--------------
------------------
--------------
-------------------
--
-------------------------------- ------- -- -
----------------
-----------------------
------------- -- --------------------------
-------------------------
--
---
-- -- ------- ------
--------------------------------- ------- -- -
----- ------------- - -------------
----------------
------------------------------- -- -
------ ----------------------------- -- ------------------------------------
------------------------ -- -
------ ---------------------------------------------- -- -
------ -----------------------------
----
---------- -- ---------------------
--
---
-- ----- ----- ---------------------------------------
------------------------------ ------- -- -
------------------
---------------------------
---------------- -- -
-- ---------- -
------ ---------
-
------ --------------------
-
-
--
---上述代码首先定义了需要缓存到 App Shell 的资源 URL，并在 Service Worker 安装时将这些资源缓存到浏览器中。每次在更新 Service Worker 时会清理旧版本的缓存。
在处理所有请求时，我们使用 Cache First 的策略。先从缓存中查找相应的资源，如果缓存中存在，就返回缓存内容，否则通过网络请求获得。
总结
通过合适的缓存策略和最佳实践，在 PWA 应用开发中，我们可以有效地提升应用的性能和用户体验。在实际开发过程中，我们应该多加尝试不同的缓存策略，并进行性能优化和容错处理，保证应用的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf734a9e06631ab9bd0b57