appcacheweb开发

AppCache（Application Cache）就是一种本地缓存技术，可以使得网页在离线情况下仍能够展示之前缓存的内容。这个技术的实现，其实在浏览器底层，也就是HTTP层面完成的。下面，笔者就来详细介绍一下AppCache的开发原理和详细过程。

一、AppCache的原理

AppCache的基本维度包括四个部分：缓存清单、命名空间、已经缓存的内容和状态信息。这个技术的原理实现步骤主要如下：

1.浏览器首次请求某个网页时，服务器在HTTP响应头里增加一个manifest文件的特殊声明：`CACHE MANIFEST`。

2.浏览器每次请求一个网页时，都要先检查这个manifest文件是否被修改过。如果没有被改动，就会直接从本地的缓存中读取，而不需要再次请求更多的数据，从而提高了网页的速度和效率。

3.然后，浏览器便通过Manifest文件来获取需要被缓存的文件（包括HTML文件、CSS文件、JS文件等等），将这些文件存储在缓存中。

4.当客户端再次请求同一个网页时，浏览器会首先检查服务端manifest文件是否有更新，如果没有则从缓存中直接读取，否则会重新请求服务端的manifest文件并更新缓存。

综句话来说，AppCache的工作流程就是：浏览器在发出请求时，先检查是否存在适当的缓存，如果没有，则请求服务端manifest文件，看看哪些文件需要被缓存，然后通过HTTP请求获取文件并将文件缓存。这些已经缓存的文件可以在客户端离线时使用。

二、如何使用AppCache开发网页

下面，笔者就抛开理论，来跟大家分享一下AppCache的具体开发流程和代码实现步骤。

1.创建缓存清单manifest文件（index.manifest）

在项目根目录下创建一个名为index.manifest的文件，并在HTML文件开头中增加manifest声明，如下：

```

Hello, AppCache!

```

注：manifest文件的后缀必须为.manifest。

2. 编写manifest文件

在index.manifest文件中，使用CACHE MANIFEST行来定义需要被缓存的文件，使用FALLBACK行来定义没有被缓存文件的替代品。其中，CACHE MANIFEST中“#”开头的注释行不会被忽略。

例如，我们想要缓存一个HTML文件、一个CSS文件和一个JS文件，就可以在index.manifest文件中这样写：

```

CACHE MANIFEST

# version 1.2

index.html

style.css

script.js

```

3.在命令行中配置encoding

由于manifest文件指定为“text/cache-manifest”，所以需要在服务器的HTTP头信息中声明文件以这种类型的呈现方式输出。同时，也必须指定文件在服务器中的字符集为UTF-8。

在我的Mac系统下，进入项目目录，然后在终端输入如下命令：

```

> cd /path/to/your/project

> echo "text/cache-manifest; charset=utf-8" > .htaccess

```

如果你使用的是Apache则这个.htaccess文件自动生成，欲自己手动配置的话可以使用下面的代码：

```

AddType text/cache-manifest .manifest

AddEncoding utf-8 .manifest

```

4.运行网页并测试

在服务器上运行项目后，可以在Chrome开发者工具的Network（网络）面板中查看缓存状态信息，看看能否获取到缓存文件。在没有Internet的环境下测试，也可以看到页面依然正常工作。比如下图中，manifest文件、html文件和js文件都已经被缓存在本地。

参考文献：

1. “离线web应用之Application Cache” by 陈素封, from http://www.ruanyifeng.com/blog/2011/06/html5_cache_manifest_file.html

2. “Manifest 缓存” by MDN Web Docs, from https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache