目录
1、认识 HTML5 离线应用
大部分网页必须要连网才能访问,但是有些时候,比如在飞机上或地下隧道,没有网络信号就无法访问网站,这对于 web 用户的体验是很不好的,因此 HTML5 引入了离线缓存的功能。
HTML5 离线存储(Offline Storage)的核心功能是:在用户没有与因特网链接时,依然可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据。HTML5 的 ApplicationCache API 提供了离线缓存的功能。在页面中的数据加载时,允许用户可以定义一些要缓存的图片、CSS、JavaScript、HTML等文件,等下次不能连网的情况下,还可以用那些缓存的文件,这就是HTML5 离线应用。
在 Web 应用中使用离线存储,避免了加载应用程序时所需的常规网络请求。如果 缓存清单(Cache Manifest)文件是最新的,浏览器就无需检查其它资源是否最新,大部分应用程序可以非常迅速地从本地缓存中加载完成。
HTML5 离线应用有三大好处:(1)用户可以离线访问 Web 应用,不用时刻保持与因特网的链接、(2)因为文件被缓存在本地,提升了页面加载速度、(3)离线应用只加载被修改过的资源,因此大大降低了用户请求对服务器造成的负载压力。
2、使用 manifest 文件
离线缓存技术包含两部分内容:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)
(1)manifest 缓存清单:manifest 缓存文件包含了一些需要缓存的资源清单。
(2)JavaScript 接口:提供了用于更新缓存文件的方法以及对缓存文件的操作。
Manifest 文件内容的基本格式要求如下:
第一行必须以 CACHE MANIFEST 开头 |
紧接着是文件的路径或注释,写在CACHE MANIFEST(或CACHE入口)后的文件将被下载到本地后缓存起来 |
注释必须以 # 开头 |
必须声明一个白名单,这个名单制定的文件将在用户链接因特网后访问,它必须在 NETWORK:下一行。 NETWORK 部分罗列的资源,无论缓存中存在与否,均从网络获取。 |
CACHE 部分,在进入因特网后,增加一个缓存内容,这些文件的路径必须在 CACHE:的下一行。 |
可选的 FALLBACK 部分提供了获取不到缓存资源时的备选资源路径。第1个文件的路径和第2个文件的路径中间有一个空格。 这个FALLBACK:的作用是:当第1个文件缓存不成功时,或无法找到时,它会缓存第2个文件。 |
下面例子:创建一个以 manifest 为扩展名的文件,命名为 cacheData.manifest,在这个文件中将指定一些文件的路径,如HTML、CSS、JS、Images。下面是一个完整的 manifest 文件的内容:
CACHE MANTEEST
version 1.0
login.html
static/css/i.css
static/js/mui-min.js
static/img/png/icons.png
NETWORK: //以下资源必须在线访问
static/img/png/button=ok.png
CACHE: //进入因特网后添加的缓存内容
static/img/png/login-slider-bg.png
FALLBACK: //添加备份,这些文件的路径必须在FALLBACK:的下一行
static/img/png/alipay-bank=icbe.png static/img/png/alipay-bank-cmb.png
Web 应用的缓存只有在 manifest 文件被修改的情况下才会被更新,所以如果只是修改了被缓存的文件,那么用户本地的缓存还是不会被更新的,但是可以通过修改 manifest 文件的注释来告诉浏览器需要更新缓存。
创建好 cacheData.manifest 文件,下面就需要在 HTML 中指定文档的 manifest 属性为 cache.manifest 文件的路径。
<!DOCTYPE html>
<html manifest="cacheDate.manifest">
...
</html>
3、使用离线缓存
实现离线缓存需要 3 步操作,只要完成下面者三步操作,即使拔掉网线也可以访问页面。
(1)配置服务器 manifest 文件的 MIME 类型;
(2)编写 manifest 文件;
(3)在页面的 html 元素的 manifest 属性中引用 menifest 文件。
启用离线应用之后,当修改 JavaScript 代码或 CSS 代码,然后将更新内容上传到服务器,在本地刷新页面重新预览时,会无法看到最新的页面效果。那是因为本地浏览器还没更新 HTML5 的离线缓存文件。
更新 HTML5 离线缓存有 3 种方法:
(1)清除浏览器缓存:如果用户清除了浏览器缓存(手动或用其他一些工具)都会重新下载文件
(2)修改 manifest 文件:修改 manifest 文件中罗列的文件是不会更新缓存的,而是要更新 manifest 文件(可通过注释修改)
(3)通过javascript操作:html5 中引入了 js 操作离线缓存的方法,下面的 js 可以手动更新本地缓存。
window.applicationCache.update();
4、离线缓存应用案例
为了方便快速理解离线缓存的应用,我们通过一个简单的首页缓存演示 HTML 离线缓存的应用。整个过程只需要5步即可。
(1)添加 HTML5 Doctype。给所要缓存的首页文件 index.html 添加 HTML5 Doctype 标识,比如:
<!DOCTYPE html>
<html>
...
</html>
(2)添加 .htaccess 服务器配置支持。在创建用于缓存页面的 manifest 清单之前,首先要在 .htaccess 文件中添加以下代码:
AddType text/cache-manifest .manifest
//该指令可以确保每个manifest文件为text/cache-manifest MIME类型。
//如果MIME类型不对,那么整个清单将没有任何效果,页面将无法离线应用。
(3)创建 manifest 文件。配置服务器之后,创建 manifest 清单文件。新建一个文本文件另存名为 offline.manifest,然后:
CACHE MANIFEST
CACHE: //声明需要缓存的文件
index.html
style.css
image.jpg
NETWORK: //下面的文件只能在线访问
search.php
login.php
FALLBACK: //在资源不可用的情况下将用户重定向到下面文件
/api offline.html
(4)关联 manifest 文件到 HTML 文档。设计完 manifest 文件和 HTML 文档,还需要将manifest文件关联到 HTML 文档中:
<!DOCTYPE html>
<html manifest="/offline.manifest">
...
</html>
(5)测试文档。当访问页面成功后,浏览器会默认自动缓存 manifest 清单中的指定资源,此后即使服务器停止工作或无法上网,我们依然可以访问服务器上的该首页信息。