下面再回到之前创建的 manifest 文件 … 这个文件的最开始，要输入一个 .. CACHE MANIFEST

表示这是一个 manifest 文件 … 然后另起一行 … 可以输入其它的内容 …

在这个文件里添加注释的内容 …可以使用一个 # 号，接着是一个空格 … 然后是注释的内容 …

比如我们可以说明一下这个文件的版本 … # v1 ….

manifest 文件里可以分成几个部分 … 不同的部分可以使用一个指定的标题文字分隔开 … CACHE: NETWORK: 还有 FALLBACK:

不同部分下面的列表有不同的用处 … 如果不指定这个标题文字的话 … 默认会是 CACHE: … 也就是需要缓存的地址或者资源列表 …

不过为了让这个文件结构更清晰一起 … 我们先输入这个部分的标题文字 … 输入大写的 CACHE … 再加上一个冒号 ..

CACHE:

回到应用的页面上，我们先去看一下需要缓存的资源 …

因为这个页面上带有 manifest 属性 … 所以不管怎么样 … 这个页面本身的内容都会被缓存 … 也就是页面上的标签 .. 文字 … 这些内容 …

页面上链接的其它的资源 … 比如 css ，js .. 图片等等　… 这些资源我们需要单独去设置一下 … 才能被缓存 …

下面我们可以把页面上用到的 css 还有 js 文件的地址粘贴到 manifest 文件的 CACHE 区域下面 ...

….

这个列表里的资源的路径可以使用相对的，也可以使用绝对的 … 如果使用相对的路径 … 是相对于 offline.appcache 这个文件的路径 …

现在浏览器缓存应用的页面的同时 …. 也会把 CACHE 下面的这些东西缓存下来 …

下面我们去试一下 .. 保存 ….

测试

在浏览器里打开这个页面 … 这里我用的是 Chrome 浏览器 … 打开它的开发者工具里面的控制台 …

浏览器在缓存应用的时候会在控制台上输出一些有用的信息 …

刷新一下这个的页面 ….

在控制台上，你会看到发生的一些事件 … 在后面的视频里，我们再详细的介绍一下这些事件 ..

浏览器会根据我们为页面指定的 offline.appcache 文件里的 CACHE 区域下面的列表 … 去缓存一些资源 …

再打开 Resources .. 资源选项器去看一下 … 打开 Application Cache

offline.appcache … localhost …

在这里，同样可以看到缓存的资源列表 … 再回到控制台 …

下面我们再刷新一下这个页面 ..

使用了 Application Cache 的应用页面被浏览器缓存以后 … 下次再访问这个页面的时候 … 浏览器会直接从缓存里面调出这个页面来显示 …

你会发现，页面上原来的图片没有显示 … 因为我们并没有设置让浏览器缓存这些图片 … 所以在显示这个页面的时候，缓存里并没有这些图片的缓存 ..

这样他们也就不会显示在页面上 ….

用户在离线状态下，或者在我们的应用的服务器关闭的情况下 … 这个被缓存的页面仍然可以显示 …

下面我们可以关掉服务器 …

再刷新一下这个页面 …

你会发现，除了页面上没有显示没被缓存的图片以后 … 其它的东西仍然可以正常使用 …

点击这个文字 … 会出现工具提示 … 因为它需要的 js 还有 css 文件已经被缓存下来了 ...