html5离线缓存不起效果，难道manifest属性废弃了吗？

以你之姓@ 2023-01-04 14:55 132阅读 0赞

# html5中的离线缓存不起效果，什么原因？知道的小伙伴麻烦留言一下。 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

**以下是火狐浏览器的效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

**IE浏览器效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

**火狐浏览器效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6][]

**IE浏览器效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7][]

**cache.html**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8][]

**tomcat7目录下\\conf\\web.xml文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 10][]

<mime-mapping>
        <extension>appcache</extension>
        <mime-type>text/cache-manifest</mime-type>
    </mime-mapping>

**test.appcache文件**

CACHE MANIFEST
    #######2020-12-31 v1.0.0
    #指明缓存入口
    CACHE:
    cache.html
    test.js
    ../css/inputAndDiv.css
    #以下资源必须在线访问
    NETWORK:
    ../img/panda4.jpg
    #如果index.html无法访问则用404.html代替
    FALLBACK:
    index.html  ../404.html

**test.js文件**

/**
     * 
     */
    window.onload = function() {
    	var divNode = document.getElementById("show");
    	divNode.onclick = function() {
    		alert("哈哈，我老家在江西于都.....赣南脐橙是我家乡的特产");
    	}
    	
    }

**cache.html文件**

<!DOCTYPE html>
    <html manifest="test.appcache">
    <head>
    <meta charset="UTF-8">
    <title>html5学习(离线缓存)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    <script type="text/javascript" src="test.js"></script>
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>html5学习(离线缓存)</h3>
    <div id="show" style="height: 260px;">
    江西省赣州市于都县
    </div>
    <img src="../img/panda4.jpg">
    </body>
    </html>

### **在网上搜索了一番，看到2个可能性比较大的原因：** ###

**1.服务器设置不当有关**

**2.HTML5废弃manifest属性**

### **目前，我还不清楚到底是什么原因导致缓存不起效果，我先记录一下。** ###

> # html5中离线缓存的实现 #
> 
> ### 工作原理： ###
> 
> 是基于一个新建的.appcache文件的缓存机制。解析清单离线存储资源，这些资源就像cookies一样存储起来。
> 
> ### 如何实现呢？ ###
> 
> 在html的头部加入manifest属性，并在cache.manifest文件中编写离线存储的资源。在离线状态时，操作window.applicationCache进行实现
> 
> ### 浏览器是如何对离线资源进行管理和加载的呢？ ###
> 
> 在线状态时，浏览器发现html头部有manifest属性，就会请求manifest文件，如果是第一次访问，则会根据manifest文件中请求的资源进行下载并离线存储。如果不是第一次访问，且资源已经离线存储了，浏览器就会通过离线存储的资源加载页面。并且对比新的manifest文件和旧的manifest文件，如果未更改，就不做任何操作了。如果更改了，就重新下载文件中的资源并离线存储。
> 
> 离线状态时，就直接使用离线资源。

[html5中manifest特性测试][html5_manifest]

[HTML <html> manifest 属性][HTML _html_ manifest]

[HTML5 manifest缓存为什么我用就这么多坑][HTML5 manifest]

[傻傻分不清的Manifest][Manifest]

[HTML5 manifest离线缓存][HTML5 manifest 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221119/4a9a741896f44561b510633fb0163dde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221119/2e7f53f866fe4e779dfb1735a9bd2d33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221119/75a6c1d2ad884e3697169dce5de97378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221119/4adaa6af2abf4049bbae988fade81dde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221119/7dbc57156f1c429c83f6bbc95d5f560f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221119/14d08e5ba3f7451d9d6236db25b78bee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6]: /images/20221119/cc53a1d9299948c2847e25fc6d914bbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7]: /images/20221119/997c23c498764b4ba24d9acb22df6ea5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8]: /images/20221119/4c5520a55dcf44df888cc0af27060f98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9]: /images/20221119/249a1f091e214cfe8af83201946cce83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 10]: /images/20221119/a01a329eba144255ab0f7c8c752fd48c.png
[html5_manifest]: https://www.cnblogs.com/sunshq/p/4221177.html
[HTML _html_ manifest]: https://www.cnblogs.com/yc10086/p/13223380.html
[HTML5 manifest]: https://bbs.csdn.net/topics/391971209
[Manifest]: https://segmentfault.com/a/1190000019395237?utm_source=tag-newest
[HTML5 manifest 1]: https://www.cnblogs.com/whitecusp/p/4593512.html