这篇文章主要是总结之前学过的应用缓存的知识。
# 应用缓存简介
应用缓存也是html5新增的一大特色，可以创建网站离线版本，为网站提供良好的用户体验。
作用有以下几点：
- 离线游览网站；
- 打开速度快，已经缓存资源不再重新加载；
- 减少服务器压力，只下载更新过的资源；
# 使用方法
# 网站应用设置
在网站根目录创建一个manifest.appcache文件，写入以下内容：
CACHE MANIFEST声明标识；#注释；CACHE：缓存的资源路径；NETWORK:可填，直接读取的文件，使用通配符*即可;FALLBACK:可填，指定备用页面，当资源无法访问时，使用该页面；
例如：
CACHE MANIFEST
# version 0.0.1
# 声明注释,浏览器根据manifest文件变化来检测是否需要重新加载新文件
# 注释：需要缓存的文件，无论在线与否，均从缓存里读取
/images/logo.png
/css/main.css
/js/main.js
# 需要特殊声明的缓存文件，也可以都在这里声明
CACHE:
/css/os.css
/js/jq.js
# 注释：不缓存的文件，无论缓存中存在与否，均从新获取
NETWORK:
*
# 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面
FALLBACK:
index.html 404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 页面中设置
<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>manifest</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<h2>html5应用本地缓存</h2>
<p>缓存本页面提供离线游览！</p>
<div>
<img src="/images/logo.jpg" alt="logo">
</div>
<script src="/js/main.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 服务器设置支持
nginx配置：打开nginx目录下的mine.types文件，写入
types { text/cache.manifest manifest; }1
2
3apache配置：在服务器根目录或者应用同级目录下创建一个
.htaccess文件，写入以下内容：AddType text/cache-manifest .appcache1
# 更新离线资源
let appCache = window.applicationCache;
appCache.onupdateready = function(e) {
appCache.swapCache();
window.location.reload();
};
1
2
3
4
5
2
3
4
5
# Webpack配置离线缓存
下载appcache-webpack-plugin插件，在配置文件中写入以下内容：
const AppCachePlugin = require('appcache-webpack-plugin');
plugins: [
new AppCachePlugin({
cache: ['otherAsset.png'],
network: ['*'], // 除了声明的缓存资源其他都通过网络访问
fallback: ['index.html', 'error.html'],
settings: ['prefer-online'],
exclude: ['file.txt', /.*\.html$/], // Exclude file.txt and all .html files
output: '/manifest.appcache'
})
]
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
