随着浏览器对 PWA（Progressive Web App）的支持不断地提高，现在开发者在开发 Web 应用时越来越多地使用 Service Workers 技术。Service Workers 的一个主要作用是创建离线应用程序，但是鉴于其它优点（比如更快的加载速度，更好的安全性等），它又成为了可选的最佳实践。
sw-precache-webpack-dev-server-plugin 是一个 webpack 插件，可以生成用于缓存静态资源的 Service Worker。在本文中，将为您介绍如何在 Webpack 中使用 sw-precache-webpack-dev-server-plugin 插件来生成您自己的 Service Worker。
开始使用 sw-precache-webpack-dev-server-plugin
首先安装最新版本的 sw-precache-webpack-dev-server-plugin：
npm install sw-precache-webpack-dev-server-plugin --save-dev
接下来，将在 webpack.config.js 配置文件中添加 sw-precache-webpack-dev-server-plugin 插件：
-- -------------------- ---- -------
----- ----------------------- - -------------------------------------------------
-------------- - -
-- ---- ------- ------ ---- ----
-------- -
--- -------------------------
-------- ------------------
--------- --------------
---------------- -
-----------------------------------------
--
------- -----
------------ --------
--------------- --
----------- --------------------------
-------- ------------
--
--
-
--解读配置
下面来详细解释一下代码里面的配置项：
cacheId：代表缓存名称，每个 Service Worker 都有唯一的 cacheId。所以在配置阶段禁止重复使用相同 cacheId。filename：生成 Service Worker 文件的名称和路径。staticFileGlobs：要缓存的文件匹配模式。minify：如果设置true，SWPrecacheWebpackPlugin会用压缩后的代码生成 Service Worker 文件。stripPrefix：在生成 Service Worker 文件中删除指定的前缀。runtimeCaching：定义要分批次缓存的请求。
插件工作原理
SWPrecacheWebpackPlugin 会帮助我们快速生成一个 Service Worker，为我们提供了以下几个好处:
- 生成一个文件（mysw.js），其中包含我们的静态应用程序的所有资源。
- 将这个Service Worker安装到用户的浏览器中，以便在不再联网时可以访问资源。
- 首次安装 Service Worker 时，将从网络中提取所有资源。每个资源都将缓存。
- 以后，如果离线时打开 Web 应用程序，就会使用 Service Worker cache。
示例代码
以下是一个简单的 webpack 配置文件：
-- -------------------- ---- -------
----- ----------------------- - -------------------------------------------------
----- ---- - ----------------
-------------- - -
------ -------------------- -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------------
-------- ------------------
--------- --------------
---------------- -
-----------------------------------------
--
------- -----
------------ --------
--------------- --
----------- --------------------------
-------- ------------
--
--
-
--结论
如您所见，在 webpack 项目中使用 sw-precache-webpack-dev-server-plugin 这个插件是非常简单的。通过它，您可以快速创建一个 Service Worker，这样当用户离线时，您的应用程序可以使用 Service Worker 缓存。此插件仅仅是使用 Service Workers 技术中的一个开端，为你安排一个干净、容易维护和可扩展的 Service Worker， SW-Precache 工具提供了大量的选项和有用的功能，因此请您去看它们的文档。
值得一提的是，在使用 Service Workers 技术时，一定要确保操作系统浏览器的版本支持 Service Workers。一旦这个规定被遵循了，你就能够使用这个强大的工具，让你的 Web 应用程序成为一个不断向前的技术领袖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005584b81e8991b448d581f