近年来，Web 应用程序的性能提升显著。在这方面，Service Worker 技术是一项重大的进展。它允许我们在浏览器和服务器之间建立一个独立的缓存，并将网络请求转发给该缓存以最大限度地提高Web应用的效率和速度。当然，Service Worker 是一项相对新的技术，在实践中也需要一定的学习和使用成本，而 servieworker-cache-polyfill 则是一款优秀的npm包，可以大大简化Service Worker 缓存的开发成本。本文将介绍 npm 包 serviceworker-cache-polyfill 的使用方法并提供使用示例。
环境搭建
首先，我们需要在本地搭建一个环境，以便于在本地对 Service Worker 进行调试和开发。可以通过以下步骤完成环境搭建：
安装 Node.js 和 npm。你可以在 Node.js 官网 上下载安装包或使用包管理器进行安装。
新建一个目录并在该目录下打开终端，然后使用命令行初始化一个 npm 包：
npm init
这将会提示你输入该npm包的一些基本信息，例如名称、版本、描述等。根据提示依次进行输入，最后执行成功后，将生成一个 package.json 文件，它将保存你的项目的所有依赖关系和配置信息。
安装 serviceworker-cache-polyfill
安装 serviceworker-cache-polyfill 的命令很简单：
npm install serviceworker-cache-polyfill --save
这将会在你的项目中安装该 npm 包并将其添加到 package.json 文件的依赖列表中。
编写 Service Worker
我们来创建一个简单的 Service Worker，该 Service Worker 可以截获浏览器发出的 HTTP 请求，并将请求数据缓存到 Service Worker 缓存中。以下是代码示例：
-- -------------------- ---- -------
-------------------------------------------------
--- ---------- - -------------------
--- ----------- - -
----
----------------
--------------
------------------
--
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
--- ------------ - ----------------------
------ -------------------------
------------------ -
------------ -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
--- --------------- - -----------------
-------------------------------------------- -
------------------------ -----------------
---
------ ---------
-
--
--
--
---在上述代码中，我们定义了一个名为'CACHE_NAME'的变量。它表示要缓存数据的名称。我们还定义了一个字符串数组'urlsToCache'，其中存储了我们希望缓存的文件的 URL。在 install 事件监听器中，我们打开了一个新的缓存，并异步缓存了上述 URL。在 fetch 事件监听器中，我们先尝试从缓存中读取已缓存的响应，如果没有找到已缓存的响应，则将其添加到缓存中，并将其返回。
注册 Service Worker
接下来我们将为 Service Worker 注册服务。在通常情况下，我们通常将 Service Worker 放置在与应用程序不同的文件夹中。在项目的根目录中创建一个文件夹，例如'sw'，在该文件夹中创建一个名为'sw.js'的文件，并添加以下代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
--------------------------------------------------------------------- -
-------------------- ------ ------------ ------------ --------------
------------------------ -
-------------------- ------ ------------ --------- -------
---
- ---- -
-------------------- ------- --- --- -------------
-在上述代码中，我们首先检查浏览器是否支持 Service Worker，如果支持则尝试为 Service Worker 进行注册，并显示成功或失败的消息。
测试
现在我们可以在浏览器中运行我们的应用程序并测试 Service Worker。它应该可以成功地截获 HTTP 请求并将请求数据缓存到 Service Worker 缓存中。并且在第一次打开页面时从缓存中进行加载，从而大大提高网站的加载速度。
使用 serviceworker-cache-polyfill 很容易地实现了一个 Service Worker ，并且使得整个应用程序的缓存变得简单易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc83b5cbfe1ea06127e7