码迷,mamicode.com
首页 > Web开发 > 详细

html5的离线缓存

时间:2017-02-07 01:20:06      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:nbsp   连接   har   网络   还需   重启   图片   sheet   oct   

一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源。

把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替。

1、服务器端配置
需要在apache配置文件加:AddType text/cache-manifest .manifest,并重启服务器。

2、manifest文件,格式如下

#这一句必须存在,而且必须放在头部
CACHE MANIFEST
#指明要缓存的内容
CACHE
#指定无需缓存的文件
NETWORK
#这个声明,允许你在资源不可用的情况下,将用户重定向到特定文件
FALLBACK


创建res.manifest如下:

CACHE MANIFEST
CACHE:
test.html
test.css
test.js
NETWORK:
test.jpg
FALLBACK:

 

3、在html标签添加属性manifest

<!DOCTYPE html>
<html lang="en" manifest="res.manifest">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./test.css">
    <script src="test.js"></script>
</head>
<body>
    <img src="test.jpg" >
</body>
</html>

重新联网后,html内容改变,但页面仍没有变化,因为默认优先使用缓存,修改manifest文件,刷新就可以。

html5提供了两种检测是否在线的方式:
navigator.onLine和online/offline事件。

1、navigator.onLine属性表示当前是否在线。
2、开发者还需要在网络状态发生变化时立刻得到通知,所以提供了online/offline事件。

applicationCache属性,事件,方法API,慎用。

html5的离线缓存

标签:nbsp   连接   har   网络   还需   重启   图片   sheet   oct   

原文地址:http://www.cnblogs.com/jkko123/p/6372231.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!