简介
Service Worker 是一种在浏览器后台运行的 JavaScript 脚本，可以用于实现离线缓存、推送通知等功能。sw-precache 是一个基于 Service Worker 的离线资源预缓存工具，可以帮助我们在构建过程中生成静态资源的缓存清单，并自动注册 Service Worker。
安装
使用 npm 进行安装：
npm install --save-dev sw-precache
配置
在项目根目录下新建 sw-precache-config.js 文件，配置项如下：
-- -------------------- ---- -------
-------------- - -
---------------- -
-----------------------------------------------------------
--
------------ -----
--------------- --
----------- -------------------------------
-------- ---------------
---
-------- -----
--staticFileGlobs：要进行缓存的静态文件路径和类型。stripPrefix：指定缓存的前缀，这里使用相对路径。runtimeCaching：定义运行时缓存策略，这里是以https://api.example.com开头的 API 请求采用networkFirst策略（从网络获取最新数据）。verbose：是否输出详细日志信息。
使用
在项目根目录下执行以下命令生成 Service Worker 文件：
sw-precache --config sw-precache-config.js
生成的 Service Worker 文件默认输出到项目根目录下，文件名为 service-worker.js。
在 HTML 文件中引入 Service Worker 文件：
-- -------------------- ---- -------
--------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-
---------示例
以下是一个简单的示例，使用 sw-precache 实现了基本的资源缓存和 API 请求缓存：
-- -------------------- ---- -------
-- ---------------------
-------------- - -
---------------- -
---------------
--------------------
--------------------
------------------------------
--
------------ -----
--------------- --
----------- -------------------------------
-------- ---------------
---
--
-- ----------
--------- -----
------
------
----- ----------------
------------------ ---------------
----- ---------------- -----------------------
-------
------
--------------- ------------
---- ----------------------
-- -----------------
------- -------------------------------
--------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-
---------
-------
-------
-- -------
--------------------------------------------------------- -
------ ------------
---------------------- -
---------------------------------------------- - ---- --------- - - ---------------------
---------------------- -
------------------ ------- --------- -----
---通过以上配置和示例，我们可以实现简单而强大的 Service Worker 缓存功能，提高 Web 应用程序的离线访问体验和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/49090