刚学了一个新的东西。发博客分享一下下。
- 什么是应用程序缓存
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中,可以直接写上*,更直接