HTML5 应用缓存 appcache

最新推荐文章于 2024-06-15 12:04:16 发布

风左山心

最新推荐文章于 2024-06-15 12:04:16 发布

阅读量696

点赞数 1

分类专栏： html5 文章标签： html5 应用缓存 appcache manifest cache

本文链接：https://blog.csdn.net/HF819239570/article/details/50900770

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写博客好辛苦,你不关注一下么=~=

1.什么是应用程序缓存Application Cache?
我这里用wscshool给出的解释:
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问.
通过创建一个cache manifest文件,我们可以轻松构建一个离线应用.

2.优势

可配置需要缓存的资源
网络无连接应用也可以用
本地读取缓存资源,提升访问速度,增强用户体验
减少请求,缓解服务器负担

3.缓存清单
什么是缓存清单,其实就是一个文本文件,配置哪些需要缓存那些不需要,推荐使用.appcache为后缀名,添加MIME类型
如果我们创建了一个名叫demo.appcache的文件,要在需要应用缓存的那个页面的根元素(html)添加属性manifest = “demo.appcache”

    <html lang="en" manifest="demo.appcache">

4.manifest文件格式

顶行写CACHE MANIFEST
CACHE:换行,指定我们需要缓存的静态资源,如css,js,img
NETWORK:换行指定需要访问的资源,可使用通配符
FALLBACK:换行当被缓存的文件找不到时的备用资源

 CACHE MANIFEST

CACHE:

#此部分写需要缓存的资源

./images/img1.jpg


NETWORK:
#此部分写需要有网络才能访问的资源,没网络则不访问
js/main.js
*
FALLBACK:
#当访问不到某个资源时,自动由另一个资源替换
css/online.css css/offline.css
online.html offline.html