HTML5离线缓存

r囧r小猫 2021-09-17 01:18 468阅读 0赞

一,离线缓存  
    文档的本地缓存,在断网的情况下依旧能够访问,  
    但是不能访问网络接口  
    1,检测支持性  
        if(window.applicationCache)\{  
            alert('支持');  
        \}else\{  
            alert('不支持');  
        \}  
    2,引入文件  
        name.manifest  
        这是一个配置缓存的文件  
        CACHE:将制定的文件全部缓存到本地  
            NETWORK:将制定的文件总是从网络下载  
            FAKKBACK:制定的文件如果找不到,会被重新定位到这个地址  
            CACHE MANIFEST 开头  
            \#Cache Manifest v3.01  
            \#:表示注释  
            引入缓存文件方式:  
                在html标签中使用:  
                    manifest='name.manifest';  
    3,工作原理  
        见图片  
    4,缓存状态  
        applicationCache.status  
            0:没有缓存  
            1:空闲(缓存为最新状态)  
            2:检查中  
            3:下载中  
            4:更新就绪  
            5:缓存过期  
    5,缓存更新  
        applicationCache.update();  
    6,updateready 事件  
        当有新的缓存,并跟新完成以后,会触发这个时间  
        applicationCache.addEventListener('updateready',function()\{\})  
    7,progress 事件  
        当有新的缓存时,并处于正在下载过程中,会不断的触发这个事件  
        event.totle:一共需要加载多少文件  
        applicationCache.addEventListener('progress',function(event)\{\})  
    8,其他事件:  
        checking事件:正在检查  
        downloading事件:正在下载  
        updateready事件:更新完成  
        obsolete:缓存过期  
        cached:空闲,缓存为最新状态  
        error:错误  
        noupdate:检查更新错误结束,没有需要更新的内容  
    9,注意事项  
        1)浏览器对缓存数据的容量限制是不一样的(一般浏览器显示每个站点缓存5m)  
        2)如果manifest文件或者内部列举的某一个文件不能正常下载,整个缓存的更新都会失败,  
        浏览器继续使用全部的老文件(原来缓存的文件)  
        3)引入manifest文件的html文件必须和manofest文件同源,在同一个域下  
        4)FALLBACK中的文件必须与manifest文件同源  
        5)如果文件被缓存了,当使用本地绝对路径的file协议打开时也会打开缓存文件  
        6)站点中其他文件没有缓存,但是如果使用到的资源在缓存中,也会从缓存中访问  
        7)当manifest文件发生改变时,资源请求本身也会触发更新  
        8)如果离线存储资源有更新,但是在第一次打开该文件时还会使用老版本

下面是案例

<!DOCTYPE html>
    <html lang="en" manifest="test.manifest">引入文件
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css/test.css">
    </head>
    <body>
    	<div class="box">今天天气不好</div>
    	<img src="images/skin.gif" alt="">
    </body>
    <script src="js/test.js"></script>
    <script type="text/javascript">
    
    setInterval(function() {
    console.log(applicationCache.status);
    },3000)
    </script>
    </html>

test.manifest文件内容

CACHE MANIFEST
    #Cache Manifest v3.01
    
    CACHE:
    02_离线缓存测试.html
    
    NETWORK:
    *
    FALLBACK:
    / error.html