随着现代 web 应用的发展，越来越多的应用需要离线时也能正常工作。为了解决这个问题，我们可以使用 offline-webpack-plugin 来帮助我们生成离线包。
简介
offline-webpack-plugin 是 webpack 插件，可将 webpack 构建后的应用程序作为 Service Worker 运行。它通过缓存应用程序的所有文件，使得应用程序在离线状态下也可以正常工作。
安装
可以通过 npm 安装 offline-webpack-plugin：
npm install --save-dev offline-webpack-plugin
使用
-- -------------------- ---- -------
----- ------------- - ----------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- ---------------
-
--缓存应用程序
使用 cache 选项可以缓存应用程序的所有资源（包括 HTML、JavaScript 和 CSS 文件）。可以通过 publicPath 选项指定资源的 URL 前缀。
-- -------------------- ---- -------
--- ---------------
------- -
----- -
----------
-----------
-------------
-----------
-
--
----------- -----------
---清理缓存
可以为缓存设置过期时间以及清理过期的缓存。
-- -------------------- ---- -------
--- ---------------
------- -
----- -
----------
-----------
-------------
-----------
--
----------- -
-- ---------- ----- -- -- ------
--
--------- -
-- -------- ----- -- -- ------
-
--
----------- -----------
---------- -
-- ----- ------ ---- ---- --------
-
------ -------------------
------------- ---------
-
--
-------------- -
------- -----
---------- ---------
-------------------- --------------
------- -------
--
--------- -
------- ----
--
------------------------ ----
---自定义 Service Worker
默认情况下，offline-webpack-plugin 使用内置的 Service Worker。可以通过 serviceWorker 选项指定自定义的 Service Worker。下面是一个自定义 Service Worker 的示例：
-- -------------------- ---- -------
--- ---------------
------- -
----- -
----------
-----------
-------------
-----------
-
--
----------- -----------
-------------- -
------- -----
---------- ---------
-------------------- --------------
------- ----------
------- -----
------ --------------
------ ---
--
--------- ------
------------------------ ----
---总结
使用 offline-webpack-plugin 可以生成一个离线包，使得应用程序在离线状态下也可以正常工作。在缓存应用程序时，可以缓存所有资源，并为缓存设置过期时间以及清理过期的缓存。在自定义 Service Worker 时，可以指定自定义的 Service Worker 并配置相应的选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56930