小白入门---应用缓存(Application Cache)

来源：互联网发布：淘宝订单留言在哪里编辑：程序博客网时间：2024/06/05 02:56

应用缓存(Application Cache)

1、基本含义

》在移动设备没有网络的情况下，不出现404并且可以基本使用
》使用步骤：

1.需要有一个用于缓存的文件，尾缀为.manifest。

a):是用于配置需要缓存的文件的
b):在不同情况下缓存的内容

2.在HTML中引入.manifest文件，可以使用应用缓存了。

3.使用应用程序缓存给应用程序带来以下好处：

》脱机浏览：即使用户离线，用户也可以浏览网站。
》速度：缓存的资源是本地的，因此加载速度更快。
》减少服务器负载：浏览器只下载从服务器更改的资源。

4.在缓存清单文件的部分：CACHE，NETWORK，和FALLBACK

》CACHE:这是缓存清单文件中条目的默认部分。第一次下载文件之后，列出CACHE:部分标题下的文件（或紧后CACHE MANIFEST）。
》NETWORK:NETWORK:缓存清单文件中的部分标题下列出的文件是需要连接到服务器的白名单资源。即使用户离线，对这种资源的所有请求都绕过缓存。通配符可以使用一次。大多数网站需要。
》FALLBACK:该FALLBACK:部分指定浏览器在资源不可访问时应使用的后备页面。本节中的每个条目都列出了两个URI：第一个是资源，第二个是后备。这两个URI必须是与清单文件相对的和与源文件相同的来源。可以使用通配符的CACHE，NETWORK和FALLBACK 部分可以在高速缓存中的清单文件的任何顺序排列，并且各部分可以在单一清单中出现一次以上。

2、具体实例

1.HTML部分:

<html manifest="app.manifest">//要为应用程序启用应用程序缓存，必须在应用程序页面manifest的<html>元素中包含该属性    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        已经访问到页面了    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>        </body></html>

2.新建一个app.manifest文件，内容如下

CACHE MANIFEST## 需要缓存的文件index.htmljs/app.js//manifestWeb应用程序中的属性可以指定缓存清单文件或绝对URL的相对路径。（绝对URL必须来自与应用程序相同的来源）。缓存清单文件可以具有任何文件扩展名，但必须使用MIME类型提供text/cache-manifest。

3.更完整的缓存清单文件

CACHE MANIFEST# v1 2011-08-14# This is another commentindex.htmlcache.htmlstyle.cssimage1.png# Use from network if availableNETWORK:network.html# Fallback contentFALLBACK:/ fallback.htm//此示例使用NETWORK和FALLBACK部分指定network.html页面必须始终从网络检索，并且fallback.html页面应作为后备资源（例如，如果无法建立与服务器的连接）。

4、具体实例

(function(){    console.log(window.applicationCache);//已经缓存过的文件 下一有网的情况下，加载出来的内容还是之前缓存中的内容/*解决思路：更新缓存的配置文件 * window.applicationCache * onobsolete*/    window.applicationCache.onobsolete=function(){        //更改应用缓存文件的名字        console.log("应用缓存文件失效")        this.swapCache();//会把旧的应用缓存替换成新的        location.reload();///Location.reload()方法从当前URL重新加载资源。    };})();//测试网络,正常情况下是不把manifest文件放在本地的，以下模拟manifest文件再服务端/*应用缓存的详细使用 *1. 需要在服务端配制应用缓存文件 * 2. 在客户端断网的时候保存一个版本当来网的时候更新应用缓存的文件，可以通过applicationCache监听 应用缓存失效的状态，只要失效就重新加载页面*/(function(){    navigator.onLine=function(){//online只是navigator的一个属性        var request=new XMLHttpRequest();        request.open("GET","js/data.json");        request.onload=function(){            console.log(JSON.parse(this.response).data.appcacheURL);            document.querySelector("html").manifest=JSON.parse(this.response).data.appcacheURL;//可以动态去获得manifest这个文件了        };        request.send();        window.applicationCache.onobsolete=function(){            //更改应用缓存文件的名字            console.log("应用缓存文件失效")            this.swapCache();//会把旧的应用缓存替换成新的            location.reload();///Location.reload()方法从当前URL重新加载资源。        };    }})();//window里面可以监听在线离线事件window.addEventListener("online",function(){    console.log("online");});window.addEventListener("offline",function(){    console.log("offline");});

阅读全文

0 0