离线存储之Application Cache

最新推荐文章于 2021-10-02 07:52:51 发布

欢乐程序小姐姐

最新推荐文章于 2021-10-02 07:52:51 发布

阅读量403

点赞数 2

文章标签： html5 application

本文链接：https://blog.csdn.net/weixin_46513664/article/details/105028318

版权

1、什么是应用缓存（Application Cache）

HTML5引入了应用程序缓存（又叫离线缓存），这意味着web应用可进行缓存，并可在没有网络连接时进行访问。

2、应用缓存的优势

1）离线浏览-用户可以在离线状态下浏览网站内容

2）速度-因为数据被存储在本地，所以速度会更快

3）减少服务器负载-浏览器只会下载在服务器上发生改变的资源

3、访问流程

第一次正确配置app cache(manifest)后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变动更新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app cache的资源返回，基本流程是这样的。

4.如何应用

a) 安装PHP测试环境

b) 在PHPStudy中>其他选项菜单>打开配置文件> 在httpd.conf 中查找： AddType , 在找到的行后换行添加： AddType text/cache-manifest .manifest

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

<!DOCTYPE html>
<html lang="en" manifest="manifest.manifest">
<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="image/1.jpg">
    <img src="image/2.jpg">
<script type="text/javascript">
    window.addEventListener('load', function(e){
        console.log(window.applicationCache.status);
    })
</script>
</body>
</html>

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

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

如果加上FALLBACK:就是在链接点击失败的时候跳转的页面

FALLBACK:
     / 4.html

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

1）CACHE:（必须）

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

2）NETWORK:（可选）

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

3）FALLBACK:（可选）

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

5.更新缓存的方式

1）更新manifest文件

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

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

appcache更新了缓存重新从网络上拉取需要cache的文件，但是，我们如果想要看到改变，必须再次刷新页面。

2）通过javascript操作

　浏览器提供了applicationCache供js访问，通过对于applicationCache对象的操作也能达到更新缓存的目的。

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

            window.applicationCache.addEventListener('updateready', function (e) {

                if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

                    // 调用applicationCache.swapCache()即可将原缓存换成新缓存。

                    window.applicationCache.swapCache();

                    window.location.reload();

                }

            }, false);

        }, false);