h5离线应用
h5离线应用
所谓离线应用,就是断网之后还可以运行的应用。h5提供了application cache,可以保存网页的离线数据。CSDN的Markdown编辑器就运用了application cache,在没有网络的情况下,一样可以正常使用,这就是一个很好的离线应用。
application cache和http缓存有时候很相似,http缓存也可以把浏览过的网页缓存下来,在断网情况下也可以打开。但是http缓存是会过期的,而application cache是永久的。http缓存像是一个快照,只是保存了网页的某个状态,而离线应用是实实在在的在运行。当网页是一个“单页应用”时更能体现两者的区别。
在chorme浏览器下,可以访问:
- application cache 地址: chrome://appcache-internals/
- http cache 地址 : chrome://cache/
查看两者。
实现一个h5离线应用
首先,需要一个清单文件,指出哪些文件是需要离线存储的。文件的名称和后缀都是可以是随意的,如下面这个文件可以命名为:appcache.manifest
,如果服务器识别不了这样的后缀,则需要将这种后缀配置到服务器
CACHE MANIFESTCACHE: common.csscommon.jsicon.webpNETWORK: imgs/good1.webpimgs/good2.webpFALLBACK:good1.webp offline/imgs/good1.webp
CACHE MANIFEST : 清单文件的第一行必须是这个,表示这是一个清单文件
CACHE: 后面跟着需要离线的文件
NETWORK: 后面跟着的文件表示是需要从网络上获取的
FALLBACK: 这个标签是可选的,后面每一行有两个文件,表示当第一个文件访问不了时,使用第二个文件。
需要注意的是,清单上的文件路径不能有错,只要一个有错,所以文件都不会离线保存。
第二步是,在需要离线的网页的<html>
标签上增加manifest
属性,指向上面的清单文件。
<html manifest = "appcache.manifest"> ...</html>
每一个需要离线的网页都需要配置一个manifest
属性,从这也可以看出,h5的application cache更适合“单页应用”,而不是网站。
就这样,一个离线应用就完成了,当你第一次打开带有manifest
属性的网页时,浏览器就会把离线文件下载下来,以后每次运行,都直接从缓存里拿这些文件。
在chorme浏览器下,可以按F12打开调试工具,选择“网络”,设成“offline”来模拟断网:
要观察到效果,禁用掉http缓存更好。
更新离线文件
自动更新
离线文件一旦缓存下来,浏览器以后都将使用离线文件,不会再向服务器请求该文件,也不知道服务器端的文件是否更新。但是,浏览器会在每次打开网页的时候,检查manifest文件是否是最新,所以只要manifest文件发生变化时,浏览器就会更新一遍离线文件,这便是自动更新。
手动更新
可以通过
window.applicationCache
对象来手动更新离线缓存。
参考
应用缓存初级使用指南
九种浏览器端缓存机制知多少
相关内容
-
在wps中粘贴保留原格式化|wps中复制文件保留原
在wps中粘贴保留原格式化|wps中复制文件保留原有格式,格式化,...
-
什么是boot.ini文件错误ini的非法解决方案
什么是boot.ini文件错误ini的非法解决方案,,千奇百怪的电脑问...
-
鼠标不能拖动文件了
鼠标不能拖动文件了,鼠标,拖动,本文目录鼠标不能拖动文件了电...
-
Outlook的PST文件损坏的修复方法
Outlook的PST文件损坏的修复方法,文件, ...
-
1394连接是什么1394网络适配器知识
1394连接是什么1394网络适配器知识,,今天有网友在QQ群中问了这...
-
电脑什么文件不能删除文件|电脑中哪些文件不能
电脑什么文件不能删除文件|电脑中哪些文件不能删除,,电脑中哪...
-
怎么用usb共享电脑网络|如何usb共享网络给电脑
怎么用usb共享电脑网络|如何usb共享网络给电脑,,1. 如何usb共...
-
电脑上怎样打文件|电脑上怎样打文件符号
电脑上怎样打文件|电脑上怎样打文件符号,,电脑上怎样打文件符...
-
小编辑器教你减少计算机网络流量的最简单方法
小编辑器教你减少计算机网络流量的最简单方法,,核心提示:教你如...
-
无线路由器网络如何自动断开线路
无线路由器网络如何自动断开线路,,如何解决无线路由器网络自动...
-
将wps转为EX|把WPS文件转为excel表格
将wps转为EX|把WPS文件转为excel表格,转为,如何将,wps,1.怎么...
-
网络设置怎么还原|网络设置怎么还原电信
网络设置怎么还原|网络设置怎么还原电信,,网络设置怎么还原电...
-
电脑字幕手机怎么载入|电脑字幕手机怎么载入文
电脑字幕手机怎么载入|电脑字幕手机怎么载入文件,,电脑字幕手...
-
远古VOD系统通过压力测试标准的网络视频点播项
远古VOD系统通过压力测试标准的网络视频点播项目,,近日,河北沧...
-
u盘看不到文件其他电脑可以看到|电脑里看不到u
u盘看不到文件其他电脑可以看到|电脑里看不到u盘,,1. 电脑里看...