PWA（Progressive Web App）是一种新型的 Web 应用程序体验，它可以像原生应用程序一样为用户提供完整的功能，比如离线访问、后台推送、添加到主屏幕等。在这个感性化的时代，PWA 为我们的 Web 应用程序定义了新的标准。本文将教你如何在 React 应用中添加缓存来提升它们的离线体验。
为什么缓存是重要的？
无论是传统的服务器端渲染应用还是现代的单页应用，Web 应用程序都需要加载许多资源，例如样式表、脚本、图片和內容。这些资源由于需要从远程服务器加载，所以会有一定的延迟。这在移动设备上的体验尤为明显，因为移动设备的带宽和网络连接不如桌面设备稳定。
当应用程序进入离线状态时，它通常会在用户界面上显示错误页面或空白页面，降低了用户体验，并可能导致流量损失。通过使用缓存机制，我们可以在应用程序离线时存储所需的资源，以允许应用程序提供一种更好的、无需互联网连接的解决方案。
如何在 React 应用中使用缓存
React 使用通过 Webpack 和其他工具构建的 JavaScript 文件来编译，所以我们可以使用类似 Service Worker 的 API 从这些文件中缓存我们的资源。在本文中，我们将使用 Workbox，一个 Google 开发的工具，用于利用 Service Worker 实现 Web 应用程序的离线功能。
步骤一：安装 Workbox
首先，你需要安装 Workbox，可以通过以下命令在你的项目中进行安装：
npm install workbox-cli
步骤二：在 React 应用中添加 Service Worker
在 React 项目中，你可以使用 cra-template-pwa 模板来初始化一个带有 Service Worker 的应用程序。该模板已包含了 Workbox 和外观库，可以通过以下方式进行安装：
npx create-react-app my-app --template cra-template-pwa
安装完成后，将会自动生成 Service Worker 文件和 favicon.svg，可以通过 Chrome 开发者工具来查看，并且支持离线模式。
步骤三：配置 Workbox
现在，我们需要让 Workbox 来缓存请求的资源。我们可以使用 Workbox 注册 Service Worker，并缓存我们的 HTML、CSS 和 JavaScript 文件。
在 src/index.js 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
-- ---------------- -- ---------- -
----- -- - --- ------------------------------
-------------------------------- ------- -- -
-- ----------------- -
-------------------- ------ --------- --- --- ----- --------
-
---
--------------
- ---- -
-------------------- ------- --- --- -------------
-步骤四：缓存我们的资源
现在，我们需要编写一些代码来缓存我们的资源。我们将把所有静态资源放在一个数组中：
-- -------------------- ---- ------- ----- ------------ - - ---- -------------- ----------------- --------------------- --------------------- --------------- --------------- -------------- --------------------------- ------------------------ ----------------------- ----------------------------- -------------------------- --
然后，我们需要创建一个 Service Worker，这样我们就可以使用 Workbox 为我们创建缓存：
/* global self, workbox */ self.__WB_MANIFEST = [ ...filesToCache, ...self.__WB_MANIFEST ]; workbox.precaching.precacheAndRoute( self.__WB_MANIFEST.filter((item) => item !== '/service-worker.js') );
我们现在已经可以使用 Workbox 缓存我们的资源。我们可以启动我们的应用程序并在离线时离线缓存。
在你的应用程序中，你现在可以通过以下命令来测试缓存是否已生效：
const fromCache = await caches.match(request);
if (fromCache) {
console.log('Response from cache found!', request.url);
return fromCache;
}总结
本文我们介绍了如何使用 Workbox 以及 Service Worker 来在 React 应用中使用缓存。这将帮助我们提高我们应用程序的性能、并为我们的用户提供更好的体验，同时还有着更低的流量成本。在今天的 Web 开发中，缓存是一个必不可少的方面，PWA 则强调了缓存的重要性。如果你想深入了解 PWA，请访问 PWA 简介。
示例代码
-- -------------------- ---- -------
------ - -------- - ---- -----------------
-- ---------------- -- ---------- -
----- -- - --- ------------------------------
-------------------------------- ------- -- -
-- ----------------- -
-------------------- ------ --------- --- --- ----- --------
-
---
--------------
- ---- -
-------------------- ------- --- --- -------------
-
----- ------------ - -
----
--------------
-----------------
---------------------
---------------------
---------------
---------------
--------------
---------------------------
------------------------
-----------------------
-----------------------------
--------------------------
--
-- ------ ----- ------- --
------------------ - - ---------------- --------------------- --
------------------------------------
-------------------------------- -- ---- --- ---------------------
--
----- -------- ----------------------- -
----- ----- - ----- ---------------------------
----- --------- - ----- ---------------------
-- ----------- -
--------------------- ---- ----- -------- -------------
------ ----------
-
--------------------- ---- ----- --- -------- -------------
-
----- -------- ------------------------ -
----- -------- - ----- ---------------
--------------------- ---- ------ ---------
------ ---------
-
----- -------- --------------------- -
----- ----- - ----- ---------------------------
----- -------- - ----- ---------------
--------------------- ---- ------ --- ------- -------- -------------
----- ------------------ ------------------
------ ---------
-
----- -------- ------------------------- -
----- - ------- - - ------
------------------
-------------------------------- --
-------------------------------------------
-
--
-
------------------------------ --------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca00d45ad90b6d0418f62e
