一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源。
把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替。
1、服务器端配置
需要在apache配置文件加:AddType text/cache-manifest .manifest,并重启服务器。
2、manifest文件,格式如下
#这一句必须存在,而且必须放在头部 CACHE MANIFEST #指明要缓存的内容 CACHE #指定无需缓存的文件 NETWORK #这个声明,允许你在资源不可用的情况下,将用户重定向到特定文件 FALLBACK
创建res.manifest如下:
CACHE MANIFEST CACHE: test.html test.css test.js NETWORK: test.jpg FALLBACK:
3、在html标签添加属性manifest
<!DOCTYPE html> <html lang="en" manifest="res.manifest"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./test.css"> <script src="test.js"></script> </head> <body> <img src="test.jpg" alt=""> </body> </html>
重新联网后,html内容改变,但页面仍没有变化,因为默认优先使用缓存,修改manifest文件,刷新就可以。
html5提供了两种检测是否在线的方式:
navigator.onLine和online/offline事件。
1、navigator.onLine属性表示当前是否在线。
2、开发者还需要在网络状态发生变化时立刻得到通知,所以提供了online/offline事件。
applicationCache属性,事件,方法API,慎用。