前言
PWA（Progressive Web App）是新一代 Web 应用的标配，它将 Web 应用和 Native 应用进行了有机的结合，让 Web 应用也能像 Native 应用一样拥有更好的用户体验。其中，PWA 缓存技术是 PWA 的核心之一。优化缓存不仅可以提高应用的性能，还可以让应用在离线状态下也能正常运行。本文将分享关于 PWA 的缓存技术方案，其中包括 SW-Precache-Webpack 插件的使用方式。
搭建 PWA 应用
首先，让我们来创建一个 PWA 应用。使用 Create React App 可以方便的创建一个 PWA 应用，可以通过以下命令来创建一个基于 React 的 PWA 应用：
npx create-react-app my-pwa-app --template cra-template-pwa
执行完命令后，目录结构如下：
-- -------------------- ---- -------
-----------
---------
-------------
------------
----------
-------
----------
-------------
----------
-----------
-----------
----
-------
------
-----------
---------
--------
--------
----------------其中，serviceWorker.js 实现了 PWA 中的缓存逻辑，PWA 的缓存分为两个部分：应用代码缓存和数据缓存。首先，我们需要对应用代码进行缓存优化。
优化应用代码缓存
这里我们使用 SW-Precache-Webpack 插件来实现应用代码的缓存优化。SW-Precache-Webpack 插件可以帮我们生成一个 Service Worker 文件，该文件会缓存所有需要缓存的文件，包括 HTML、CSS、JS、图片等。首先，在项目中安装 SW-Precache-Webpack 插件：
npm install sw-precache-webpack-plugin --save-dev
接着，在 webpack 配置文件中添加 Plugin：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
-------------- - -
-- --- ----- -------
-------- -
--- -------------------------
-------- -------------
-------------------------- ------------
--------- --------------------
------- -----
----------------- ----
------------------------------ ---------- -------------------
---
--
--其中，cacheId 是 Service Worker 缓存名称，dontCacheBustUrlsMatching 是对文件名进行匹配的正则表达式，缓存时请忽略该正则表示式匹配到的 URL，staticFileGlobsIgnorePatterns 控制在 Service Worker 生成期间将被忽略的文件。
接着，在项目根目录下创建一个名为 manifest.json 的文件，它会告诉浏览器如何安装我们的应用，manifest.json 的内容如下：
-- -------------------- ---- -------
-
------------- --- -----
------- --- ----------- --- -----
-------- -
-
------ --------------
-------- ----------
------- -----------
--
-
------ --------------
-------- ----------
------- -----------
-
--
------------ ----
-------------- ----------
------------------- ----------
---------- ------------
-manifest.json 中 icons 字段中定义了我们应用的图标，start_url 字段定义了应用安装后打开的页面。最后，我们还需要在 public/index.html 文件中添加以下代码段：
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <meta name="theme-color" content="#000000">
这里我们引入了 manifest.json，并设置了主题颜色。
现在，重新构建应用，生成的 build 文件夹中会包含 service-worker.js 和 manifest.json 两个文件。接下来，我们需要优化数据缓存。
优化数据缓存
服务端的数据一般比较大，为了节约客户端的流量，我们需要让数据可以被缓存。我们使用了 IndexedDB 存储共享的数据，使用了 Cache Storage 保存经常使用的数据。首先，我们需要在 Service Worker 中注册一个全局事件用于对请求进行拦截：
-- -------------------- ---- -------
------------------------- ------- -- -
------------------
------
---------------------
---------------------- -- -------------- -- ---------------------
--------- -- -
----- - --- - - --------------
-- ------------------------------------------- -
------ -------------------------------------
-
------ ---------------------
---
--
---这里，我们首先查询 caches 缓存中是否有该请求，如果没有则进行网络请求。如果网络请求失败，则返回默认图片 /img-placeholder.svg，也可以用其他合适的方式进行 fallback。
接着，在应用中我们可以通过以下代码来将数据存入 Cache Storage：
caches.open('my-pwa-app-dynamic').then((cache) => {
cache.put('/api/user', new Response(JSON.stringify(user)));
});我们将数据 user 存储到了名为 my-pwa-app-dynamic 的 Cache Storage 中，并以 /api/user 作为缓存键。同样，我们可以通过以下代码来查询缓存中是否存在指定数据：
caches.match('/api/user').then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse.json();
}
return fetch('/api/user').then((res) => res.json());
});这里我们通过 caches.match() 来查询缓存中是否存在对应的数据，如果存在则直接返回对应数据，否则进行网络请求。
总结
本文主要讲解了 PWA 的缓存技术。通过使用 SW-Precache-Webpack 插件可以优化应用代码缓存，而 IndexedDB 和 Cache Storage 对数据进行缓存。这样可以大幅度提高 PWA 应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a33aad48841e9894f9a840