html应用缓存入门

13 篇文章 0 订阅

应用缓存:

使用应用缓存可以得到以下益处:

 

1.        离线浏览: 用户可以在离线状态下浏览网站内容。

2.        更快的速度: 因为数据被存储在本地,所以速度会更快。

3.        减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

 

应用缓存如何工作:

为应用启用应用缓存,你需要在应用页面中的 <html> 元素上增加 manifest 特性

<html manifest="example.appcache">

  ...

</html>

manifest 特性与 缓存清单(cache manifest) 文件关联,这个文件包含了浏览器需要为你的应用程序缓存的资源(文件)列表。

应当在每一个意图缓存的页面上添加 manifest 特性。浏览器不会缓存不带有manifest 特性的页面,没有必要添加所有意图缓存的页面的清单文件,浏览器会暗中将用户访问过的并带有 manifest 特性的所有页面添加进应用缓存中。

 

application cache的使用会修改文档的加载过程:

 

1.        如果应用缓存存在,浏览器直接从缓存中加载文档与相关资源,不会访问网络。这会提升文档加载速度。

2.        浏览器检查清单文件列出的资源是否在服务器上被修改。

3.        如果清单文件被更新了, 浏览器会下载新的清单文件和相关的资源。这都是在后台执行的,基本不会影响到webapp的性能。

 

存储位置与清除离线缓存:

应用缓存可以变成废弃的。如果从服务器上移除一个应用的清单文件,浏览器将会清除所有清单中列出的应用缓存,并向 applicationCache 对象发送一个「obsolete」事件。这将使得应用缓存的状态变为 OBSOLETE。

 

缓存清单文件:

引用一个缓存清单文:web 应用中的 manifest 特性可以指定为缓存清单文件的相对路径或一个绝对 URL(绝对 URL 必须与应用同源)。缓存清单文件可以使用任意扩展名,但传输它的 MIME 类型必须为 text/cache-manifest。

 

缓存清单文件中的记录:缓存清单文件是一个纯文本文件,它列出了所有浏览器应该缓存起来的资源,以便能够离线访问。资源使用 URI 来标识。在缓存清单文件中列出的所有记录必须拥有相同的协议、主机名与端口号。

 

注意:不要在清单文件中指定清单文件本身,否则将无法让浏览器得知清单文件有新版本出现。

 

清单文件例子:

CACHE MANIFEST            //缓存清单文件的第一行必须包含

# v1 2011-08-14       //#v版本号 时间

# This is another comment

index.html

cache.html

style.css

image1.png

 

# Use from network if available//#注释内容

NETWORK:           //段落标题NETWORK:   切换到缓存清单的在线白名单段落。

network.html

 

# Fallback content    //注释内容

FALLBACK:         //段落标题 FALLBACK切换到缓存清单的后备资源段落。

/ fallback.html

 

清单分为3个段落:

1.        CACHE::切换到缓存清单的显式段落(默认段落)。

这是缓存文件中记录所属的默认段落。在 CACHE: 段落标题后(或直接跟在 CACHE MANIFEST 行后)列出的文件会在它们第一次下载完毕后缓存起来。

2.        NETWORK:

在 NETWORK: 段落标题下列出的文件是需要与服务器连接的白名单资源。所有类似资源的请求都会绕过缓存,即使用户处于离线状态。可以使用通配符。

3.        FALLBACK:

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

CACHE, NETWORK, 和 FALLBACK 段落可以以任意顺序出现在缓存清单文件中,并且每个段落可以在同一清单文件中出现多次。

 

段落数据

不同段落的数据行格式有所不同。在默认 (CACHE:) 段落,每行都是一个合法的  URI 或 IRI ,与一个要缓存的资源相关联(本段落内不允许通配符)。每行的 URI 或 IRI 前后允许出现空白字符。在Fallback 段落内,每行都是一个合法的 URI 或 IRI(与一个资源关联),紧跟着一个后备资源,用于当无法与服务器建立连接时访问。在 Network 段落内,每行都是一个合法的 URI 或 IRI,关联一个需要通过网络获取的资源(本段落内可以使用通配符 *)。

注意:相对 URI 是指相对于缓存清单的 URI,而不是包含清单的文档的 URI。

缓存清单可以在段落内任意切换(每个段落标题可以使用多次),而且段落允许为空。

 

一个应用缓存中的资源

一个应用缓存至少会包含一个资源,由 URI 指定。所有资源都属于下列类别之一:

 

4.        主记录:这些资源被加入缓存的原因是:用户浏览的一个上下文中包含一个文档,该文档用 manifest 特性明确指明了它属于该缓存。任意在 <html> 元素上包含一个 manifest 特性的 HTML 文件都可以是主记录

5.        显式记录:这些是在应用缓存清单文件中显式列出的资源。显式记录就是在缓存清单文件的 CACHE 段落显式列出的资源。

6.        网络记录:这些是在应用缓存清单文件中作为网络记录列出的资源。缓存清单文件的 NETWORK 段落指定了 web 应用需要在线访问的资源。一个应用缓存中的网络记录本质上来说是一个「在线白名单」—在 NETWORK 段落指定的 URI 会从服务器而不是缓存加载。这使得浏览器的安全模型通过限制用户让其只访问经过验证的资源来避免潜在的安全漏洞。

简单的从清单文件中过滤主记录(在 html 元素中拥有 manifest 特性的文件)并不会产生同样的结果,因为主记录会被添加到—后续访问的获取也会从—应用缓存中。

7.        后备记录:这些是在应用缓存清单文件中作为后备记录列出的资源。

注意: 资源可以被标记为多个类别,因此可以作为多重记录来分类。例如,一条记录既可以是显式记录,也可以是一条后备记录。当尝试请求资源失败时会使用后备记录。例如,缓存清单文件 http://www.example.com/example.appcache 包含如下内容:

CACHE MANIFEST

FALLBACK:

example/bar/example.html

任何访问 http://www.example.com/example/bar/ 或它的任意子目录及内容都会使浏览器发出请求,去尝试加载请求的资源。如果尝试失败(可能是由于网络连接失败或服务器问题),浏览器将会加载 example.html。

 

缓存状态

每个应用缓存都有一个状态,标示着缓存的当前状况。共享同一清单 URI 的缓存拥有相同的缓存状态,可能是其中之一:

 

1.      UNCACHED(未缓存):一个特殊的值,用于表明一个应用缓存对象还没有完全初始化。

2.      IDLE(空闲):应用缓存此时未处于更新过程中。

3.      CHECKING(检查):清单已经获取完毕并检查更新。

4.      DOWNLOADING(下载中):下载资源并准备加入到缓存中,这是由于清单变化引起的。

5.      UPDATEREADY(更新就绪):一个新版本的应用缓存可以使用。有一个对应的事件 updateready,当下载完毕一个更新,并且还未使用 swapCache() 方法激活更新时,该事件触发,而不会是 cached 事件。

6.      OBSOLETE(废弃):应用缓存现在被废弃。

 

测试缓存清单的更新

你可以使用 JavaScript 来写程序检测应用是否拥有一个可以更新的缓存清单文件。因为缓存清单文件可能会在脚本添加事件前完成更新,所以脚本应该始终检测 window.applicationCache.status。

 

function onUpdateReady() {

  alert('foundnew version!');

}

window.applicationCache.addEventListener('updateready',onUpdateReady);

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

 onUpdateReady();

}

 若要手动测试一个新的清单文件,你可以使用 window.applicationCache.update()。

 

 

陷阱

永远不要使用传统 GET 参数(例如 other-cached-page.html?parameterName=value) 来访问缓存文件。这会使浏览器绕过缓存,直接从网络获取。若想链接一个参数需要在 JavaScript 中解析的资源,你可以将参数放到链接的 hash 部分,例如 other-cached-page.html#whatever?parameterName=value。

当应用被缓存后,仅仅更新在 web 页面中使用的资源(文件)还不足以更新被缓存的文件。你需要在浏览器获取和使用更新的文件前,去更新缓存清单文件本身。你可以使用 window.applicationCache.swapCache() 以编程的方式完成上述目的,虽然这无法影响到已经加载完毕的资源。为了保证资源从应用缓存的最新版本中加载,最理想的办法就是刷新页面。

通过在 web 服务器上设置 expires header 来使 *.appcache 文件立即过期是个好主意。这避免了将清单文件缓存的风险。例如,在 Apache 中,你可以指定下面的配置项:

ExpiresByType text/cache-manifest"access plus 0 seconds"

 

缓存兼容性:我们将兼容性数据转换成机器可读的JSON格式。这个兼容性表仍然使用旧格式,因为我们还没有转换它包含的数据。找出你能帮助的方法!



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值