HTML5离线缓存 – 随身笔记

H5缓存

1，<html lang=”en” manifest=’manifest.appcache’>

2，添加文件
//manifest.appcache

你直接修改文件是没用的，你只有修改版本好才能达到更新页面的效果，例如：升级到version 0.2

下面代码意思是

缓存列表是

img/1.jpg
img/2.jpg
css/css.css

其他的内容均网络下载

CACHE MANIFEST
#version 0.1
CACHE:
 img/1.jpg
 img/2.jpg
 css/css.css
NETWORK:
 *

更全面例子：

CACHE MANIFEST

CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js

NETWORK:
# 不需要缓存的
4.jpg

FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
  2.jpg加载失败后就加载3.jpg代替
2.jpg/3.jpg

3，加上以下这段JS，当修改了manifest.appcache中的版本号就会在重新更新之前的缓存

<script>
 window.onload = function () {
   window.applicationCache.addEventListener('updateready', function (e) {
    if( window.applicationCache.status==window.applicationCache.UPDATEREADY ){
       window.applicationCache.swapCache();
       window.location.reload();
    }
   },false);
 }
</script>

4，修改apache文件mime.types
在文件的末尾加上

text/cache-manifest           appcache

H5缓存优点：就是离线时候还能正常显示页面，下次访问时候速度极快，降低服务器压力。

缺点：一旦有一个文件更新了它不会只更新一个文件的缓存而是全部文件都缓存一边，还有一个页面带有参数例如：a.php?p=1 和 a.php?=2，会当作两个页面把同样的CSS和JS再多缓存一次。

在什么情况下适合H5缓存：

1，在单页面时候没有参数

2，不需要实时更新业务

3，手机微信webapp（手机流量珍贵）

相关视频：http://www.imooc.com/video/3249