随着 Web 应用的不断发展，现代 Web 应用对离线缓存越来越依赖。为了让 Web 应用能够离线运行，我们需要使用 Appcache。
在这篇文章中，我们将介绍如何使用 npm 包 broccoli-appcache，来生成 Appcache 文件，从而让 Web 应用能够离线使用。
什么是 Appcache？
Appcache，又称为应用程序缓存，是 HTML5 的一项功能。它可以让 Web 应用向客户端缓存一些文件，这些文件包括 HTML、CSS、JavaScript、图片、音频、视频等等。当用户下次访问该应用时，该应用可以从缓存中加载这些文件，而无需从服务器重新获取。
什么是 broccoli-appcache？
broccoli-appcache 是一个 Grunt 插件，可以用于生成 Appcache 文件。它可以将你的项目代码压缩成一个包，存储到客户端本地，让 Web 应用能够离线使用。
如何安装 broccoli-appcache？
在安装 broccoli-appcache 之前，你需要先安装 Grunt。通过以下命令来安装 Grunt：
npm install -g grunt-cli
安装完成后，你可以通过以下命令来安装 broccoli-appcache：
npm install --save-dev broccoli-appcache
如何使用 broccoli-appcache？
在你的项目目录下，创建一个名为 Gruntfile.js 的文件。在该文件中，新增以下配置：
-- -------------------- ---- -------
-------------- - --------------- -
----------------------------------------
------------------
--------- -
-------- -
--------- ----
-------- ------------------------- ---------------------
------------- -----
-------- -----
--
---- -
----- --------------------
------ -------- ------------------------- ----------------------
-------- ------
--------- -----------------
-
-
---
----------------------------- --------------
--上述代码中，我们定义了一些基本设置，包括：
basePath：定义了cache和network的基础路径。在该例中，我们定义了根路径/作为基础路径。exclude： 定义了不需要缓存的文件，如 bower 组件和 node_modules。preferOnline：如果设置为 true，则表示用户需要在线才能访问缓存的文件。network：定义了在用户离线情况下，需要从服务器获取的文件。dest：生成的 Appcache 文件名。cache：需要缓存的文件列表，我们使用通配符**/*，表示除了exclude中定义的文件之外，所有文件都应该被缓存。fallback：定义了在离线情况下，无法缓存的文件需要指向的备用页面。
如果你不想按照上述设置进行配置，你可以在 这里 查看更多的配置选项。
在配置完成后，你可以使用以下命令生成 Appcache 文件：
grunt appcache
Appcache 文件将被生成到 dest 中定义的位置。
示例代码
在下面的示例代码中，我们使用了 emmet 和 Bootstrap，但请注意，这些文件不会被缓存。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------ ------------
----- ---------------- -----------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------------
----- --------------- ---------------------------- -----------------
-------
------
---- ------------------------
---- ------------------
---- --------------- -----------------
---- ------------------
---------- -----------
--------- ----------------- ----------
------
------
------
------
------- -------------------------------------------------------------------------------------
-----------------------------------------------
-------
-------总结
在本文中，我们学习了如何使用 broccoli-appcache 这个 npm 包，生成 Appcache 文件，从而让 Web 应用能够在离线情况下使用。通过自定义 Appcache 的配置，我们可以让应用更加灵活地适应各种使用场景。希望这篇文章能够帮助你更好地理解 Appcache，也希望你能够在你的项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde5259