HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
服务器配置
1. 需要在 apache配置文件加:
① AddType text/cache-manifest .manifest -
客户端配置
-
1、创建这个 houdun.manifest 清单文件:
-
CACHE MANIFEST# 这一句必须存在,而且必须放在头部
-
CACHE# 这一句指明要缓存的内容,一行写一个文件名
-
NETWORK # 声明用于指定无需缓存的文件
-
FALLBACK #这个声明允 许你在资源不可用的情况下,将用户重定向到特定文件,一行可以写多个文件名。
2、关联 manifest 文件到 html 文档 :
① <html manifest="/houdun.manifest">更新缓存的方式
1. 更新manifest文件
1.浏览器发现manifest文件本身发生变化,便会根据新的
manifest文件去获取新的资源进行缓存。
2.当manifest文件列表并没有变化的时候,我们通常通过
修改manifest注释的方式来改变文件,从而实现更新。
2. 通过javascript操作在线状态检测
1. HTML5 提供了两种检测是否在线的方式:
navigator.onLine 和 online/offline 事件。
1.navigator.onLine 属性表示当前是否在线。如果为 true,
表示在线;如果为 false, 表示离线
2.开发者还需要在网络状态发生变化时立刻得到通知,
因此 HTML5 还提供了 online/offline 事件