HTML5 应用缓存，Application Cache

刚学了一个新的东西。发博客分享一下下。

• 什么是应用程序缓存
  HTML5引入了应用程序缓存，这意味着web应用可以进行缓存，并且在没有因特网连接时进行访问。
• 应用缓存的优势
  1：离线浏览-用户可在应用离线时使用。
  2：速度-已缓存资源加载的更快。
  3：减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。
• 实现缓存
  如需启用应用程序缓存，请在文档的< html >标签中包含manifest属性
  manifest文件的建议的文件扩展名为：“.appcache”
• Manifest文件
  1：CACHE MANIFEST -在此标题下列出的文件将在首次下载后进行缓存。
  2：NETWORK -在此标题下列出的文件需要与服务器的连接，且不会被缓存
  3：FALLBACK -在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）

---

下面是详细的步骤

• 第一步
  首先搭建一个本地的服务器，我这里用的是nodejs搭建的本地服务器。然后就开始写代码了

• 第二步
  为了演示的更清晰，在这里，把所有的样式表，js文件与html分离开。我在这里简单的写上一句代码，并且在html标签后面加上一句manifest标签，后缀名最好是.appcache。
  

• 第三步
  新建一个index.appcache文件，里面书写标签，如图
  
  记得要大写

• 第四步
  

• 第五步
  打开服务器，打开你写的页面，这时候显示的效果是这样子的
  

• 第六步
  现在我把服务器关闭，再刷新页面，则变成了这样，是因为刚刚我们已经缓存了index.html这个页面，而没有缓存index.css。所以关闭服务器后没有显示出样式。
  

---

以下是后来又添加的内容：

上面的第二步：并且在html标签后面加上一句manifest标签，后缀名最好是.appcache。或者后缀名为：.manifest。理解为列表清单的意思。

在列表清单中，可以在CACHE MANIFEST的下一行加上版本号：

#version 1.0.0

在列表中的NETWORK中,可以直接写上*，更直接