hml5 离线缓存

440 阅读1分钟

网页在第一次加载之后,就会缓存你配置的内容

一 作用:

1 离线预览
2 只加载一次,优化了性能
适应于手机端,微信小程序就是应用了这一特性。UIWebView、WKWebView默认会有5M的网页缓存空间

二 注意事项

1 因为有缓存,之后修改的文件,都不会更新,只有修改了appcache缓存配置文件才会更新
2 只有iE不支持这一特性

三 使用方法

步骤一: 在<html>配置manifest 属性,指向缓存文件

<!DOCTYPE html>
<html manifest="6.appcache">
<body>
	<script type="text/javascript" src="./js/demo_time.js"></script>
	<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
	<p>请在本地局域网环境中,用手机打开<a href="6.html" target="_blank">这个页面</a>,然后关闭wifi,重新加载页面。页面内容不变</p>
</body>
</html>

步骤二: 配置mainfest缓存文件
三个重要属性
CACHE MANIFEST:需缓存的文件路径
NETWORK: 需通过网络请求,不缓存的文件路径 (注:*代表所有)
FALLBACK: 页面无法访问时,加载的页面

CACHE MANIFEST
# 2019-02-21 v1.0.0
/6.html
./js/demo_time.js

NETWORK:

FALLBACK:
 404.html

注: #表示注释的意思,我们可以通过修改代码中注释的时间,相当于更新了mainfest文件。我们修改的网页内容才会更新