如何使用

首先，我们建立一个html文件，类似这样：

<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <title>APP CACHE</title>

    <link rel="stylesheet" type="text/css" href="test.css">

</head><!-- text/cache-mainfest -->

<body>

    <img src="img/1.jpg">

    <img src="img/2.jpg">

<script type="text/javascript">

    window.addEventListener('load', function(e){

        console.log(window.applicationCache.status);

    })

</script>

</body>

</html>

可能有些代码看不懂，我们先看最简单的，第一行配置了一个manifest=”manifest.appcache”（注意是mani不是main），这是使用app cache首先要配置的，然后我们在这个html文件里引入了两个img做为测试用，然后监听了load时间来查看看application的status，关于applicationCache的api，可以查看。

然后在相同目录下新建一个manifest.appcache文件，注意关于路径要和html页面配置时一致即可。

CACHE MANIFEST

#version 1.3

CACHE:

    img/1.jpg

    img/2.jpg

    test.css

NETWORK:

    *

关于manifest.appcache文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项，而第一行CACHE MANIFEST为固定格式，必须写在前面。

CACHE:（必须）

标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。例如：aa.css，http://www.baidu.com/aa.js.

NETWORK:（可选）

这一部分是要绕过缓存直接读取的文件，可以使用通配符＊，,也就是说除了上面的cache文件，剩下的文件每次都要重新拉取。例如＊，login.php。

FALLBACK:（可选）

指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。例如*.html  /offline.html。

manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置

OK，上面文件配置完成之后，application cache就可以运行了。

查看console：


可以看到，一下子这么多log，但是除了4是我们console的log之外，其他的都是appcache自己打的，因为我们配置了manifest，系统会默认打出appcache的log。关于status的值：

可选值 匹配常量 描述
0 
appCache.UNCACHED
 未缓存
1 
appCache.IDLE
 闲置
2 
appCache.CHECKING
 检查中
3 
appCache.DOWNLOADING
 下载中
4 
appCache.UPDATEREADY
 已更新
5 
appCache.OBSOLETE
 失效

然后，通过log，我们看到一些文件已经被缓存，我们可以查看chrome Resources来查看：

可以看到我们的test.html文件也已经被缓存下来了，type是master，顾名思义一个管理着，而manifest.appcache文件为manifest类型。此时我们的appcache已经完成。我们可以尝试把网线断了，或者把服务器关了，同样，我们的项目仍然可以访问，这就是离线缓存。此时console：

证明直接从缓存拿去文件：

更新缓存的方式

  • 更新manifest文件

浏览器发现manifest文件本身发生变化，便会根据新的manifest文件去获取新的资源进行缓存。

当manifest文件列表并没有变化的时候，我们通常通过修改manifest注释的方式来改变文件，从而实现更新。

  • 通过javascript操作
 　　　　 浏览器提供了applicationCache供js访问，通过对于applicationCache对象的操作也能达到更新缓存的目的。
  • 清除浏览器缓存
 
对于第一种，我们修改一下manifest文件，把version改为1.4，然后刷新页面。
我们可以发现，appcache更新了缓存重新从网络上拉去的cache的文件，但是，我们如果想要看到改变，必须再次刷新页面。
 
对于第二种方法，我们首先修改一下我们的js，添加一个监听事件：
window.applicationCache.addEventListener('updateready', function(){

            console.log('updateready!');

            window.applicationCache.swapCache();//应用更新后的缓存来替换原来的缓存

        });

清除浏览器缓存再试一次，这次我们在console里调用window.applicationCache.update();，看看发生了什么：

updateready事件触发了，同样，appcache也更新了缓存，其中swapCache方法的意思是重新应用更新后的缓存来替换原来的缓存！，到这里后基本的appcache也差不多了。

注意事项：

  • 站点离线存储的容量限制是5M
  • 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
  • 引用manifest的html必须与manifest文件同源，在同一个域下
  • FALLBACK中的资源必须和manifest文件同源
  • 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
  • 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
  • 当manifest文件发生改变时，资源请求本身也会触发更新

完！

 

H5离线存储的更多相关文章

  1. H5 离线存储-使用 serverWorker 实现

    H5 离线存储-使用 serverWorker 实现 离线存储所用技术 serverWorker serviceWorker 生命周期 install 事件会在 serviceWorker 注册成功时 ...

  2. H5离线存储-manifest

    起源 html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐 ...

  3. h5 离线存储

  4. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  5. AppCache 离线存储 应用程序缓存 API 及注意事项

    使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...

  6. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  7. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

  8. H5本地存储（转）

    H5本地存储  一.本地存储由来的背景         众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...

  9. 吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

随机推荐

  1. java第三次作业

    import java.util.Scanner; public class Practice { public static void main(String[] args) { int nextV ...

  2. 使用宏命令撤销EXCEL工作表保护

    EXCEL工作表编辑资料,设置了工作表保护后,不能对表格进行插入删除操作.如果没有密码,很简单:工具-选项—工作表保护——撤消工作表保护 就可以了.如果忘记密码,如下操作: 1. 打开文件 2. 工具 ...

  3. 手动建库时一个小错误：ORA-32004: obsolete or deprecated parameter(s) specified for RDBMS instance

    此前执行了CREATE SPFILE FROM MEMORY.  重新使用SPFILE启动时,出错如下: SYS@ bys3>startup ORA-32004: obsolete or dep ...

  4. 批量下载网站图片的Python实用小工具

    定位 本文适合于熟悉Python编程且对互联网高清图片饶有兴趣的筒鞋.读完本文后,将学会如何使用Python库批量并发地抓取网页和下载图片资源.只要懂得如何安装Python库以及运行Python程序, ...

  5. Android EditText中插入话题模块的删除处理方法

    在 EditText 中添加话题 或者是 @某人 时 看起来挺简单,实际操作会有很多坑爹的问题 private String mTopic: //光标保持在话题的末尾 mInputEdit.setOn ...

  6. iOS 消息转发机制

    这篇博客的前置知识点是 OC 的消息传递机制,如果你对此还不了解,请先学习之,再来看这篇.这篇博客我尝试用口语的方式像讲述 PPT 一样给大家讲述这个知识点. 我们来思考一个问题,如果对象在收到无法解 ...

  7. Sublime3 快捷键

    Sublime3 快捷键 blog 选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子: ...

  8. 在SpringMVC框架下实现数据的国际化（即数据实现多国文字之间的转换）

    在eclipse中javaEE环境下:导入必要的架包 web.xml配置文件: <?xml version="1.0" encoding="UTF-8"? ...

  9. libevent源码分析：signal-test例子

    signal-test是libevent自带的一个例子,展示了libevent对于信号事件的处理方法. #include <sys/types.h> #include <event2 ...

  10. JS对象深刻理解 - 2

    JavaScript prototype   用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性, ...