当我们谈到 PWA（progressive web application）时，我们通常会谈论到它能够带来的快速响应、可靠的性能、离线访问等优点。这些特性是 PWA 凭借着优秀的离线缓存机制实现的。
在本篇文章中，我们将探讨如何实现优秀的离线缓存机制以及如何在 PWA 中使用它。
什么是离线缓存
由于在移动设备上访问网络有时会非常困难，因此实现离线缓存可以让我们在网络故障或者缺乏网络连接的情况下，依然可以在应用中查看内容。
简单地说，离线缓存是将应用的内容保存在浏览器的缓存中，从而使得用户可以在缺乏网络连接时访问应用。对于 PWA 来说，离线缓存是实现“渐进式增强”的关键之一。
怎样实现优秀的离线缓存
通常情况下，PWA 离线缓存的实现分为两个阶段：预缓存和运行时缓存。我们将分别探讨这两个阶段的实现。
预缓存
预缓存是指在应用首次加载时，将应用需要的内容缓存到浏览器中。此时，我们可以使用 Service Worker 实现预缓存。
通过 Service Worker，我们可以拦截浏览器的 HTTP 请求，从而实现对应用内容的缓存。在代码实现的过程中，我们可以使用 Cache API 来向缓存中添加资源。
下面的示例演示了如何使用 Service Worker 和 Cache API，在应用首次加载时预缓存应用的静态资源：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
------------------------------
--------------------- -
------ --------------
----
--------------
-------------------
------------------
---
--
--
---在上述代码中，我们通过监听 install 事件，当 Service Worker 第一次安装时，实现了对应用静态资源的预缓存。在缓存完成后，Service Worker 将进入运行状态。
需要注意的是，Service Worker 只会在浏览器主线程空闲时执行，因此缓存的动作可能在应用首次加载之后才被执行。
运行时缓存
预缓存是将应用的静态资源缓存到浏览器中，但对于动态数据，我们不能像静态资源那样来处理。此时，我们可以使用运行时缓存来缓存应用的动态资源。
下面的示例演示了如何使用 Service Worker 和 Cache API 来实现运行时缓存：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
------ --------------------
------------------------ -
-- ---------- -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
--- --------------- - -----------------
-------------------------------
--------------------- -
------------------------ -----------------
---
------ ---------
---
--
--
---在上述代码中，我们使用 fetch 事件来拦截浏览器的 HTTP 请求。当发生网络请求时，我们首先尝试从缓存中读取数据。如果存在缓存，则直接返回缓存数据。否则，我们将再次发起网络请求来获取数据，并将得到的数据保存在缓存中。
需要注意的是，我们在上述代码中，使用了 response.clone() 来复制响应。这是因为响应只能被读取一次，如果我们不进行复制的话，缓存和响应都将失效。
怎样在 PWA 中使用离线缓存
离线缓存可以使我们的应用在缺乏网络连接的情况下依然可以顺畅地运行。因此，在 PWA 中使用离线缓存应该是一个标准的实践。
使用 Service Worker 和 Cache API 实现离线缓存后，我们需要将 Service Worker 注册到应用中。下面的示例演示了如何注册 Service Worker：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
------------------------------------------
---------------------------- -
-------------------- ------ ---------- ---- ------ -- --------------------
--
---------------------- -
-------------------- ------ ------------ ------- -- -------
---
---
-需要注意的是，我们需要将 Service Worker 注册到应用的根路径下（在上述代码中，我们将 Service Worker 注册在 /sw.js），以便它可以拦截所有应用的 HTTP 请求。
结论
离线缓存是 PWA 中的重要特性之一，它可以让我们的应用在缺乏网络连接的情况下依然可以访问。在本篇文章中，我们介绍了如何使用 Service Worker 和 Cache API 实现离线缓存，并提供了示例代码。
希望通过本文的学习，你可以掌握 PWA 离线缓存的实现方法，并在实践中应用这一特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6749aa7ea1ce0063546bccfe