这篇文章主要是总结之前学过的应用缓存的知识。

应用缓存简介

应用缓存也是html5新增的一大特色,可以创建网站离线版本,为网站提供良好的用户体验。

作用有以下几点:

  • 离线游览网站;
  • 打开速度快,已经缓存资源不再重新加载;
  • 减少服务器压力,只下载更新过的资源;

使用方法

网站应用设置

在网站根目录创建一个manifest.appcache文件,写入以下内容:

  • CACHE MANIFEST声明标识;
  • # 注释;
  • CACHE:缓存的资源路径;
  • NETWORK:可填,直接读取的文件,使用通配符*即可;
  • FALLBACK:可填,指定备用页面,当资源无法访问时,使用该页面;

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
<!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>

服务器设置支持

  • nginx配置:打开nginx目录下的mine.types文件,写入

    1
    2
    3
    types {
    text/cache.manifest manifest;
    }
  • apache配置:在服务器根目录或者应用同级目录下创建一个.htaccess文件,写入以下内容:

    1
    AddType text/cache-manifest .appcache

更新离线资源

1
2
3
4
5
let appCache = window.applicationCache;
appCache.onupdateready = function(e) {
appCache.swapCache();
window.location.reload();
};

Webpack配置离线缓存

下载appcache-webpack-plugin插件,在配置文件中写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
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'
})
]