首页 > 代码库 > html5的离线缓存
html5的离线缓存
一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源。
把这些资源，在本地缓存下来，当你尝试在没有网络连接时访问网络应用程序，你的浏览器将自动切换并使用本地代替。
1、服务器端配置
需要在apache配置文件加：AddType text/cache-manifest .manifest，并重启服务器。
2、manifest文件,格式如下
#这一句必须存在，而且必须放在头部CACHE MANIFEST#指明要缓存的内容CACHE#指定无需缓存的文件NETWORK#这个声明，允许你在资源不可用的情况下，将用户重定向到特定文件FALLBACK
创建res.manifest如下：
CACHE MANIFESTCACHE:test.htmltest.csstest.jsNETWORK:test.jpgFALLBACK:
3、在html标签添加属性manifest
<!DOCTYPE html><html lang="en" manifest="res.manifest"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://www.mamicode.com/test.css"> <script src="http://www.mamicode.com/test.js"></script></head><body> <img src="http://www.mamicode.com/test.jpg" ></body></html>
重新联网后，html内容改变，但页面仍没有变化，因为默认优先使用缓存，修改manifest文件，刷新就可以。
html5提供了两种检测是否在线的方式：
navigator.onLine和online/offline事件。
1、navigator.onLine属性表示当前是否在线。
2、开发者还需要在网络状态发生变化时立刻得到通知，所以提供了online/offline事件。
applicationCache属性，事件，方法API，慎用。
html5的离线缓存
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。