HTML5 - 离线应用的创建与使用详解1（描述文件配置、完整样例）
作者：hangge | 2017-07-11 08:10
一、基本概念
1，什么是离线应用（Offline web applications）
（1）离线应用的一项基本技术就是缓存，即下载文件（如网页）并在用户计算机上保存一份副本。有了这份副本，即使计算机不能上网，浏览器也可以使用缓存文件。
（2）当然缓存不仅限于页面文件，还适用于样式文件、JavaScript 文件、图片、字体文件以及任何页面执行所需要的资源。
（3）在实际应用中，我们通过离线 Web 应用可以应付间歇性的网络中断。确保用户在执行一项复杂的任务时，不会因为突然的网络中断而造成工作全部丢失。
2，传统缓存与离线应用的区别
对 Web 开发而言，缓存并非新事物。浏览器经常利用缓存以避免下载相同的文件。比如很多网页都共用相同的样式表，浏览器不会每个页面都去下载。不过，浏览器的这种缓存方式与离线应用的缓存方式还是有区别的：
- 触发浏览器中传统缓存的机制是 web 服务器发送额外的信息，即 cache-control 头部，这个信息随同浏览器请求的文件一块发给浏览器。头部信息告诉浏览器是否应该缓存该文件，缓存多长时间再询问 web 服务器该文件是否更新过。一般来说，缓存网页的时间比较短，而缓存网页资源（如样式表、图片和脚本）的时间比较长。
- 相对而言，离线应用由一个单独的文件（即描述文件）控制，也不限定时间。大致来说，它的规则是“如果网页是离线应用的一部分，而且浏览器已经缓存了该应用，应用的定义也没有改变，那么就使用缓存的网页"。作为 web 开发人员，可以声明一些例外，告诉浏览器不缓存某些文件，或者不用某个文件替代另一个文件。但是，不用考虑过期时间和其他一些烦琐的细节。
3，浏览器支持情况
（1）桌面浏览器
- Chrome：完美支持
- Firefox：完美支持
- Safari：Safari 4 起开始支持（2009年）
- IE：IE10 起开始支持（包括后面的 Edge）
- Opera：Opera 11.5 起开始支持（2011年）
（2）移动设备
- iOS：完美支持
- Android：完美支持
4，离线应用的存储容量限制
（1）虽然从上面可以看到主流的浏览器都支持离线应用，但不同的浏览器对离线应用缓存的限制有很大不同。为避免超额使用缓存，下面列举不同设备建议使用的缓存大小：
- 桌面浏览器：可能会有一个 250MB 或 350MB 的起始配额。如果缓存使用量增大，一些桌面浏览器会略微提高点配额，但并不保证一定会这样。
- 苹果设备（iPad / iPhone）：分配 50MB 空间
- Android 设备：分配 85M 空间
注意：所有移动浏览器都会在征得用户同意后才允许网站使用缓存。
（2）我们知道一个网站可以创建多个离线应用（多个 manifest 文件），但这多个 manifest 文件空间是共用的。比如在 ipad 的 safari 上不能超过 50M。若 cache1.manfest 是 26M，cache1.manfest 是 27M，则 2 个加起来超过 50m，这时，首先 cached 完 cache1，当缓存 cache2 的时候，会报一个超过缓存容量限制的错误。cache3 自然也不会保存了，只保存了第一个 cache1。
5，测试当前浏览器的缓存大小限制
我们可以测试当前设备浏览器 Application Cache 的大小限制（PC 和移动设备均可访问）。其原理就是不断尝试下载缓存文件，如果成功就下载更大的，循环反复直至报错。
二、离线应用的实现
1，准备要改造的网页
（1）下面是一个简单的 Web 项目，结构如下：
（2）功能很简单。
首页 index.html 上有个按钮，通过 jQuery 给按钮添加个点击事件响应，点击后跳转到 welcome.html
welcome.html 中就是显示一段文字并加载一张图片。
（3）页面代码如下：
--- index.html ---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
window.location.href = "welcome.html";
});
});
</script>
<body>
<button>点击跳转</button>
</body>
</html>
--- welcome.html ---
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.com</title> </head> <body> 欢迎访问 <img src="images/logo.png"/> </body> </html>
2，创建描述文件
要将普通网页变成离线应用，第一步就是要创建描述文件（manifest file）。描述文件是一种特殊文件，告诉浏览器保存什么文件，不保存什么文件，以及用什么文件代替其他文件。它列出的所有需要缓存的内容，构成了所谓的离线应用。
（1）首先我们在网站的根目录下创建一个 .appcache 后缀的描述文件。名字随意，这里我就叫 hangge.appcache 好了。
注意：一个网站可以有任意多个离线应用，每个应用分别有自己的描述文件。
（2）描述文件的内容如下：
- 描述文件第一行一定是“CACHE MANIFEST”（全部大写）
- 接着列出需要缓存的文件。注意别写错了，如果写了一个不存在的文件，浏览器会忽略整个描述文件。
- 以 # 开头的行是注释，同时我们也可以添加一些空行方便查看。
CACHE MANIFEST # page index.html welcome.html #styles & scripts js/jquery.js # pictures images/logo.png
注意：不要缓存有查询字符串的页面
HTML5 缓存系统机制中，welcome.html 和 welcome.html?r=124 是两个不同的请求。如果根据上面的描述文件，第一个页面被缓存了。但第二个 URL 相当于指向了一个完全不同的页面，它是不会被缓存的。
3，使用描述文件
光创建描述文件还不行，还必须让流浪器知道它在哪里。我们必须在网页中引用它。
（1）我们要为 <html> 元素添加 manifest 属性，将该属性设置为描述文件路径。
<!DOCTYPE html> <html manifest="hangge.appcache"> <head>
（2）通常来说必须给离线应用包含的每个页面都添加相同的 manifest 属性，即 index.html 和 welcome.html 里都添加上面的配置。
不过我们只在 index.html 上添加也没问题，也会将描述文件里的所有资源缓存下来。只不过访问 welcome.html 时就不回去获取描述文件更新资源。
4，配置Web服务器的MIME类型
（1）确定我们的 Web 服务器是使用 text/cache-manifest 的 MIME 类型来解析描述文件，如果没有则需要添加新的 MIME 类型。下面是 IIS 服务器相关配置：
（2）建议使用描述文件时关闭传统缓存机制
Web 服务器可能会告诉浏览器把描述文件缓存一段时间，但这会影响我们测试。比如我们后面更新了描述文件，但浏览器仍然会使用缓存的旧描述文件，于是离线应用也将继续使用以前缓存的网页。
为了避免这一点，应该配置 Web 服务器，让它告诉浏览器永远不要缓存描述文件。
5，运行测试
（1）我们访问首页，在控制台中可以看到浏览器会自动请求描述文件，并开始将各个页面和资源缓存下来。
（2）如果我们使用的远程服务器，这时可以断开网络连接。如果是本地 Web 服务器，则停止网站。
（3）可以发现离线状态下这几个页面仍然可以访问，图片加载也没问题。使用开发工具可以看到，这些页面资源都是从本地磁盘缓存中获取的。
三、更新缓存的应用
1，如何触发浏览器更新缓存的应用
离线应用没有过期一说，比如上面那个样例，浏览器缓存到本地后。如果我们修改了服务器上的 index.html 页面，当我们打开浏览器重新加载这个页面，会发现看到的仍然是原先缓存的页面，而不是最新的（不管计算机目前能否上网）。
不过浏览器会检测服务器上的描述文件是否有更新，只要有更新，那么浏览器就会重新更新离线应用。
2，要触发浏览器更新缓存的应用，需要同时满足以下需求。
（1）浏览器没有缓存描述文件。
（2）描述文件的保存日期必须是新的。
（3）描述文件中的内容要有更新。可能我们描述文件确实没什么好改的（既不需要新增文件，也不要删除文件）,那我们可以在里面添加个版本号注释，每次修改下版本号，让内容有变化。
CACHE MANIFEST # version 2.0.1 # pagegg index.html welcome.html #styles & scripts js/jquery.js # pictures images/logo.png
3，关于应用更新的几个注意点
（1）更新并不会瞬间完成。浏览器发现新的描述文件后，会悄悄地下载所有文件，然后再用新下载的文件代替原来缓存的内容。下次用户再访问同一个页面（或刷新该页面），就会显示新内容。如果你想让用户马上就切换到新下载的内容，可以使用下一篇文章介绍的 JavaScript 技术。
（2）不能以只更新增量的方式更新离线应用。只要应用中有变化，浏览器就会抛弃所有旧文件懿后重新下载一遍，包括丝毫未改的那些文件。
4，手动清除浏览器缓存
在开发测试离线应用时，如果想要更新应用，每次都去修改描述文件会有些麻烦。其实我们还可以通过手动清除浏览器缓存来实现。
（1）不同浏览器清除的方式各不相同，Chrome 浏览器可以在地址栏中输入：chrome://appcache-internals/
（2）然后就可以看到每个网站使用的缓存空间。点击“Remove Item”即可将其清除。
四、访问未缓存的文件（NETWORK配置）
我们知道浏览器在缓存了某个页面后，它就不会再向 Web 服务器发送请求，而是直接使用缓存的页面。同样的，浏览器对离线页面的所有资源也持同样的态度，无论它是否缓存了这些资源。
比如：我们将描述文件中原来的 logo.png 图片给注释掉，让其不再缓存。
CACHE MANIFEST #version 2.0.1 # pagegg index.html welcome.html #styles & scripts js/jquery.js # pictures # images/logo.png
这是我们再次访问使用这个图片的页面，会发现浏览器仍然会去中缓存中去取这张图片，不管浏览器当前是否联网。
由于缓存中找不到这张图片，浏览器便会显示为找到文件的图标或者一块空白区域（取决于不同浏览器）
1，标注必须在线访问的页面
想要解决上面那个问题，必须在描述文件中添加一个以“NETWORK:”开通的区块，其后紧跟一组必须在线访问的页面。
CACHE MANIFEST #version 2.0.1 # pagegg index.html welcome.html #styles & scripts js/jquery.js NETWORK: images/logo.png
这样当联网时，浏览器会尝试从 Web 服务器下载 logo.png 文件，而在离线时，则会忽略它。
2，使用通配符（*）
（1）“NETWORK:”区块中可以使用星号通配符（*）。这样浏览器就知道所有未缓存的内容都必须联网访问。
NETWORK: *
（2）还可以使用星号匹配任意类型的文件，比如：
- *.jpg：匹配所有的 JPEG 图片。
- http://hangge.com/*：匹配 hangge.com 域中的所有文件。
五、添加后备内容（FALLBACK配置）
1，标注出根据是否在线而互换的文件
"FALLBACK:"区块中每行列出一对文件。第一个文件名是在线时使用的文件名，第二个文件名是离线后备文件名。
比如下面样例：
FALLBACK: result.html result_offline.html
浏览器会把后备文件（result_offline.html）下载并缓存起来。不过，只有在不能上网的时候浏览器才会使用这个后备文件。而能上网的时候，浏览器会照常向 Web 服务器请求另一个文件（result.html）
2，使用统配符（/）
（1）后备内容区块的通配符和 NETWORK 区块不太一样，使用的是斜杠（/）。下面描述告诉浏览器对任何不在缓存里的文件使用后备文件（Offline.html）
FALLBACK: / offline.html
（2）还可以使用斜杠指定子目录来匹配更小范围内的文件。
FALLBACK: /app/ offline.html
全部评论（0）