什么是 PWA？
PWA （Progressive Web Apps，渐进式 Web 应用）是一种可以像原生应用一样运行的 Web 应用。它具备 Web 应用的一些优点，比如跨平台、无需下载、更新方便等；同时也具备原生应用的一些优点，比如可以离线使用、推送通知等。PWA 的诞生有效地解决了手机应用市场愈发庞大，用户体验不够理想的问题。
如何构建 PWA？
要构建一个 PWA 应用，需要考虑以下几个方面：
1. 首屏加载速度
虽然 PWA 应用可以支持离线使用，但是用户第一次打开应用还是需要在网络情况良好的情况下下载应用，如果加载速度太慢，用户很可能会选择放弃。因此，我们需要尽可能优化应用的首屏加载速度。
2. 缓存策略
PWA 应用可以支持在离线模式下使用，然而如果我们没有进行好的缓存策略，应用在离线模式下的体验往往会很糟糕。因此，我们需要合理地利用 Service Worker 完成页面、资源等信息的缓存。
3. 服务端推送/推送通知
PWA 应用可以支持服务端推送和推送通知，这可以有效地提高用户使用 PWA 应用的积极性。在构建 PWA 应用时，我们需要考虑如何合理使用这两个功能。
如何实现缓存策略与性能优化？
下面，我将为大家介绍几种缓存策略与性能优化的方法。
1. 使用 CacheStorage 缓存网页或资源
在 PWA 应用中，我们可以使用 CacheStorage 对象进行缓存。CacheStorage API 可以用在 Service Worker 中，以进行 Service Worker 缓存的管理。
我们可以使用以下代码完成一个资源的缓存：
-- -------------------- ---- -------
------------------------------ - -- -
--------------
-- ---
-----------------------
-------------- -- -
-- ---------- -
------ ---------
-
-- --------------------
------ ------------------------------ -- -
------ ---------------------------------- -- -
-------------------- ------------------
------ ---------
---
---
--
--
---在上述代码中，我们首先从 CacheStorage 中取出请求对应的缓存。如果缓存存在，就直接返回缓存内容；反之，则向服务器重新请求数据，并将获取到的响应数据存储进 CacheStorage 中。
2. 预缓存
在 PWA 应用首次加载时，我们可以将预期会用到的内容提前缓存，这样即使在网络状况不佳的情况下，用户也能获得良好的使用体验。
预缓存可以在 Service Worker 安装时完成。可以使用以下代码实现预缓存：
-- -------------------- ---- -------
-------------------------------- - -- -
------------
-----------------------
----------- -- -
------ --------------
----
--------------
----------
-------------
------------------
---
--
--
---在上述代码中，我们在 Service Worker 安装过程中，利用 cache.addAll() 的方式缓存了 5 个资源。
3. 缓存更新
在实际开发中，我们经常需要更新缓存，而更新缓存的方式也有很多。下面介绍两种比较常见的方式。
① 手动更新
我们可以在客户端代码中通过以下方式手动更新缓存：
-- -------------------- ---- -------
---------------------------------------------------------- - -- -
------------------
-------------- -- ----------------
---------- -- -
-----------------------
----------- -- -
---------------------- ------
--
--
---在代码中，我们在按钮点击事件中发送了一次网络请求，并将请求得到的信息存入了 CacheStorage 中。
② 定时更新
我们也可以在 Service Worker 中定时更新缓存。以下是一段经常被用到的代码：
-- -------------------- ---- -------
-------- -------- -
-----------------------
----------- -- -
------ -------------
--------------------------------- -- ----------------------- -------------------
--------------------------------- -- ----------------------- -------------------
-- ---
---
--
-
--------------------------------- - -- -
------------
------------------- ---- - -- - -- - --- -- - -- ------
-
---在上述代码中，我们在 Service Worker 中使用了 setInterval 定时更新缓存。
总结
以上是我在 PWA 开发过程中所了解到的缓存策略与性能优化的方法。当然，无论采用哪种方法，都需要根据具体的需求制定出合理的缓存策略，才能达到较好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647fe7c048841e9894f68b91