HTML5应用缓存-CSDN博客

本文链接：https://blog.csdn.net/weixin_43269800/article/details/104436194

HTML5中我们可以轻松构建一个离线应用；只需要创建一个cache manifest文件；

优势：

1、可配置需要缓存的资源；
2、网络无连接应用仍可以使用；
3、本地缓存资源，可提升访问速度，增强用户体验；
4、减少请求，缓解服务器负担；

缓存清单

这是一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，
一般使用.appcache为后缀名。
该文件需要添加到需要缓存页面的根元素（html）中，
添加属性manifest；

<!-- 建议该应用缓存文件放到该网页的同一目录下 -->
<html lang="en" manifest="demo.appcache">

manifest文件格式

1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等；
3、NETWORK:换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK:换行 当被缓存的文件找不到时的备用资源

appcache文件内容示例：

CACHE MANIFEST
# 上面必须是第一行 

CACHE:
#此部分写需要缓存的资源 （#是注释的意思）
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg

NETWORK:
#此部分要写需要有网络才可访问的资源，无网络刚不访问
./images/img1.jpg
./images/img2.jpg
# *后后面的内容表示全部缓存，一般不设置；
#*
FALLBACK:

#当访问不到某个资源的情况下，自动由另一个资源替换；两个路径必须要用空格隔开；

./images/img4.jpg  ./images/img5.jpg