前言
Web 应用的离线缓存问题是一个非常重要的话题，它涉及到应用的性能、用户体验、可靠性等多个方面。在开发移动端应用时，更需要考虑离线缓存的问题。现在许多浏览器都支持了 Service Worker，可以用它来实现强大的离线缓存功能。但是在一些老旧的浏览器中，Service Worker 并不被支持，那么怎么办呢？
这时候就可以考虑使用一个叫做 offliner.js 的库来实现离线缓存了。它是一个基于 localStorage 和 Application Cache 的轻量级离线缓存库。
安装
可以使用 npm 安装 offliner.js:
npm install offliner.js
或者直接找到 offliner.js 的 Github 页面，下载 offliner.js 文件到本地。
使用
引入
在 HTML 文件中引入 offliner.js：
<script src="path/to/offliner.min.js"></script>
配置
配置 offliner.js 的缓存路径：
const offliner = new Offliner({
paths: [
'/',
'/index.html',
'/styles/main.css',
'/scripts/main.js'
]
})你需要将需要缓存的路径以数组的形式传入 paths，这将会存储在 localStorage 中。在下一次访问这些路径时，将会从 localStorage 中加载缓存。如果缓存不存在，offliner.js 将会尝试加载应用程序缓存。
缓存
你可以手动将一个 URL 缓存到 localStorage 中：
offliner.cache('/some/url')移除缓存
移除一个缓存：
offliner.remove('/some/url')移除所有缓存：
offliner.clear()
判断缓存是否存在
判断一个 URL 是否已经被缓存：
offliner.check('/some/url')加载缓存
在需要加载上次缓存的页面时，你可以使用 loadCachedPage 方法，它从 localStorage 中加载保存的 HTML：
offliner.loadCachedPage()
离线事件
offliner.js 会触发一些离线事件：
-- -------------------- ---- ------- -- ------ ---------------------- -------- -- ------ -- ------ --------------------- -------- -- ------ -- -------- ---------------------- -------- -- ------ -- -------- --------------------- -------- -- ------ -- ---------- ------------------------ -------- -- ------ -- ---------- ---------------------- -------- -- ------
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ---------------
----- ---------------- ------------------------
-------
------
--------------- ------------
------- --------------------------------
------- --------------------------------
--------
----- -------- - --- ----------
------ -
----
--------------
-------------------
------------------
-
--
-------------------
----------------------------------
----------------------------------
---------------------------------- -------- -- -
---------------------
--
--------------------------------- -------- -- -
---------------------
--
--------------------------------- -------- -- -
-----------------------
--
---------
-------
-------总结
offliner.js 是一个非常有用的库，它可以帮助我们解决浏览器离线缓存的问题，并且使用起来非常简单方便。虽然 Service Worker 已经成为了最佳的离线缓存解决方案，但是由于各种原因，我们还需要考虑一些老旧浏览器的适配问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fae3d1de16d83a672a5