H5学习之应用缓存(APPLICATION CACHE)

  • A+
所属分类:HTML5

介绍(introduction)

该特性已经从 Web 标准中删除,请改用Service Workers 代替。

HTML5 提供一种 应用程序缓存 机制,使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。 在处于离线状态时,即使用户点击刷新按钮,应用也能正常加载与工作。

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

  • 离线浏览: 用户可以在离线状态下浏览网站内容。
  • 更快的速度: 因为数据被存储在本地,所以速度会更快。
  • 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

应用缓存如何使用

若想为应用启用应用缓存,你需要在应用页面中的元素上增加 manifest 特性,请看下面的例子:

<!DOCTYPE html>
<html lang="en" manifest="application.appcache">
<head>
    <meta charset="UTF-8">
    <title>ifront.net</title>
    <link rel="stylesheet" href="./static/css/main.css">
</head>
<body>
<h1>HELLO WORLD</h1>
    <img src="static/img/001.jpg" alt="H5学习之应用缓存(APPLICATION CACHE)">
</body>
</html>

application.appcache


CACHE MANIFEST
#添加版本号控制浏览器是否更新缓存清单
#V3 2018-08-12

static/css/main.css

# fallback content
FALLBACK:
static/img/001.jpg static/img/002.jpg

缓存清单文件结构

段落标题 解释
CACHE: 切换到缓存清单的显式段落(默认段落)。
NETWORK: 切换到缓存清单的在线白名单段落。
FALLBACK: 切换到缓存清单的后备资源段落。
段落标题所在的行可以包含空白字符,段落名后的冒号 (:) 不可省略。

具体实践(concrete practice)

缓存清单应用成功后,chrome控制台输出如下
H5学习之应用缓存(APPLICATION CACHE)

再次刷新

H5学习之应用缓存(APPLICATION CACHE)

缓存清单的fallback功能


缓存清单配置FALLBACK如下

FALLBACK:
  #这里我们将图片001.jpg的备用地址指向002.jpg
  static/img/001.jpg static/img/002.jpg


图片地址为001.jpg时展示如下

H5学习之应用缓存(APPLICATION CACHE)

接下来修改html文件的img路径为003.jpg(该图片地址为无效地址) 修改缓存清单版本号为V2使其更新生效

H5学习之应用缓存(APPLICATION CACHE)
可以看到这时图片地址已经指向备用地址了

weinxin
我的微信
欢迎来撩!!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: