h5 离线缓存

由于在生活中，经常会遇到有些时候手机没有信号没有网络什么的，就访问不了应用了，但是我们应用有很多东西又是不怎么变化的，所以这两天看了下有关离线缓存方面的文章，自己简单实现了下：
网上都是tomcat的方式的，我使用的是nodejs的方式。
1.创建index.html

 

    
    
    
    


    
文件缓存测试12345
    去新页面
    
    

其中看到第一行,manifest的属性值是缓存的菜单文件，看看里面写的是什么：

CACHE MANIFEST
# v1.0.7

CACHE:
/public/index.html
/public/a.html
/public/1.png

NETWORK: 
/public/2.png

CACHE MANIFEST是必选的，CACHE是需要缓存的资源（可选），NETWORK是需要网络加载的资源（可选），因为浏览器解析到index.html的第一行时，会去读这份缓存清单，先看该清单与没有改变，没有改变则使用缓存中的文件，否则更新缓存刷新页面，流程是这样的：

缓存流程

然后还有最重要的一步是：demo.appcache的返回首部字段 mime必须是 text/cache-manifest,如果你用PC端访问的的话，记得不要勾选disable cache选项

不要勾选disable cache选项

你会发现，在你的缓存中会有这些东西：

image.png

你此时把服务给关掉或者网络断掉就会发现还依然可以访问网页，但是b.png无法访问，因为他没有被缓存下来。
下面是浏览器对h5离线缓存的支持情况

h5离线缓存支持情况