HTML5 Application Cache

最新推荐文章于 2024-11-06 12:47:03 发布

dotffer

最新推荐文章于 2024-11-06 12:47:03 发布

阅读量430

点赞数

分类专栏： html5 文章标签： appcache html5

本文链接：https://blog.csdn.net/dotffer/article/details/47396249

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

要使用HTML5 Application Cache分三个步骤：
1. html页面指定配置文件
2. web server设置配置文件的mime-type
3. web server写入配置文件

步骤1：

<!DOCTYPE HTML>
<html manifest="demo.appcache">

给要缓存的页面的html标签设置manifest属性，值为web server上的配置文件路径

步骤2：

manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest 文件的建议的文件扩展名是：".appcache"，自定义的文件扩展名也没问题

步骤3：

新建demo.appcache文件，按以下格式写入：

CACHE MANIFEST

CACHE:

NETWORK:

FALLBACK:

在配置文件中：
‘#’表示此行为注释，可以用来控制配置文件的更新
‘CACHE MANIFEST’为文件首行的固定写法
‘CACHE’下的内容为需要做缓存的文件
‘NETWORK’下的内容为不缓存的文件，可以用*代替所有不在CACHE下的文件
‘FALLBACK’下的内容为当页面无法访问时的回退页面（比如 404 页面）

一个栗子：

CACHE MANIFEST
#version 1.0
CACHE:
/styles/mobile-style.css?var=10121
/scripts/sea-modules/seajs/seajs/2.2.1/sea.js
/scripts/sea-modules/sea-config.js
/styles/cal/style.css?var=444
/favicon.ico

NETWORK:
*
FALLBACK: