HTML5+CSS3-充实笔记0629

HappyAndy_Lo

261

收藏 2019-06-29

离线应用

Web应用程序在离线状态下也能正常工作，需要将Web应用程序的资源文件缓存在本地，当无法访问互联网时，还可以使用缓存文件运行Web程序
访问一个网页时，浏览器缓存会将该网页所需要的所有资源缓存在本地：HTML文件、CSS文件、JavaScript脚本等（只服务于一个页面）
本地缓存可以很好地为整个Web应用程序服务，可以指定具体的缓存内容。（通过cache Manifest）

Cache Manifest的基本用法

给网页添加Cache Manifest文件
示例：
CACHE MANIFEST
# VERSION 1.0
# 直接缓存的文件
CACHE:
action.html
topbox.css
topbox.js
images/topbox.png
# 需要在线缓存的文件
NETWORK:
online.html
# 替代方案
FALLBACK:
online.js offline.js
CACHE:
images/midbox.png

服务器必须支持text/cache-manifest这个MIME类型才能正确使用离线缓存
若使用的是Apache服务器，需要在设置中找到mime.types文件，然后在文件的最后，添加：
text/cache-manifest manifest
若使用的是IIS，则需在属性对话框中，选择HTTP头标签，在MIME映射下，单击文件类型按钮，在关联扩展名文本框中输入“manifest”，在内容类型文本框中输入text/cache-manifest

在线状态监测：

HTML5中，可以通过navigator.onLine属性检测当前浏览器是否在线。如果返回true，则表示浏览器在线。
因要获取当前网络状态，还需要在网络状态发生变化时触发online 或 offline事件，通知用户当前网络状态的变化。（一般在body元素上，并沿着document.body、document、window的顺序向上传递）

创建离线应用的示例：

<!DOCTYPE html>
<html manifest="index.appcache">
<head>
   <title>9.3.1</title>
   <meta charset="utf-8" />
   <script type="text/javascript" src="index.js"></script>
</head>
<body>
<img src="MyImage.png" id="MyImage" width="300" height="180" />
<hr />
<input type="button" value="监测浏览器状态" name="myButton" />
<h2 id="msg"></h2>
<hr />
<h2>替代资源<img src="ImgOnLine.png" id="FallBackImg" width="20" height="20" /></h2>
</body>
</html>

示例中的index.appcache文件：

CACHE MANIFEST
# VERSION v1.0
CACHE:
MyImage.png
index.js
ImgOffLine.png

NETWORK:
*

FALLBACK:
ImgOnLine.png ImgOffLine.png                (即用ImgOffLine.png 替代 ImgOnLine.png）

在index.js中，编写：

Function Show(){

var msg=document.getElementById("msg");
if(navigator.onLine){

msg.innerHTML="在线<img id='state' width='20' height='20' src='ImgOnLine.png' />";
}else{

msg.innerHTML="离线<img id='state' width='20' height='20' src='ImgOffLine.png' />";

}
}