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

应用缓存简介

应用缓存也是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'
  })
]