HTML5应用程序缓存(Application Cache)

最新推荐文章于 2021-11-03 20:25:43 发布

kylin_zdd1993

最新推荐文章于 2021-11-03 20:25:43 发布

阅读量4.5k

点赞数

分类专栏： JavaScript 文章标签： html5 application cache 离线缓存

本文链接：https://blog.csdn.net/SDUST_JSJ/article/details/73222036

版权

本文介绍了HTML5应用程序缓存（Application Cache）的功能，如何创建manifest文件实现离线存储，以及缓存的工作流程和状态。尽管该特性已被弃用，但在Service Workers兼容性不佳的情况下，仍是一种有效的离线存储方案。

摘要由CSDN通过智能技术生成

最近做项目的时候，需要将web页面缓存到本地，经过调查，决定使用HTML5的应用程序缓存功能。
使用HTML5，通过创建 manifest 文件，可以轻松地创建 web 应用的离线版本。
请注意，根据MDN文档，该特性已经从 Web 标准中删除。推荐使用Service Workers代替，但是目前Service Workers 仍然有兼容性问题，所以应用程序缓存（ApplicationCache）仍然是目前进行离线存储的最好的方式。

应用程序缓存的优点

HTML5 提供一种应用程序缓存机制，使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。

离线浏览: 用户可以在离线状态下浏览网站内容。
更快的速度: 因为数据被存储在本地，所以速度会更快。
减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

实例

index.html

<html manifest="cache.appcache"> 
  ...
</html>

cache.appcache

CACHE MANIFEST
#v1.0.18

/xxx.js
/js/jquery.min.js
/xxxx.js
/xxxxx.js

NETWORK:
*

FALLBACK:
404.html

注：
1.缓存清单文件可以使用任意扩展名，但传输它的 MIME 类型必须为 text/cache-manifest。
2.manifest 文件的建议的文件扩展名是：".appcache".
3.在缓存清单文件中列出的所有记录必须拥有相同的协议、主机名与端口号。
4.不要在清单文件中指定清单文件本身，否则将无法让浏览器得知清单文件有新版本出现。

应用程序缓存appcache文件配置

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存。
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存。可以使用通配符。
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）