h5 离线缓存小demo
传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低。比如:在火车上,穿山越岭进隧道,便无法访问web应用......
离线缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器压力 - 浏览器将只从服务器下载更新过或更改过的资源
*支持性检测
实现离线缓存的步骤:
1, 建立.manifest或者appcache为后缀的文件。
manifest文件结构:
CACHE MANIFEST(必须)
# 第一行必须为CACHE MANIFEST
CACHE:(必须)
# 在此标题下列出的文件将在首次下载后进行缓存
NETWORK:(可选)
# 在此标题下列出的文件需要与服务器连接,不会被缓存
#加载文件或图片的地址(必须)
# 在此标题下列出的文件规定当页面无法访问时的回退页
2建立一个index.html 将文件引入html里面
3在服务器上面打开
4拔掉网线刷新页面图片还在(没有离线缓存的话没网了直接ng了小七认为这妹子还是很养眼的)
h5离线缓存缺陷
1、含有manifest属性的当前请求页无论如何都会被缓存
2、更新需要建立在manifest文件的更新,文件更新后是需要页面再次刷新的(需要2次刷新才能获取新资源)
3、更新是全局性的,无法单独更新某个文件(无法单点更新)
4、对于链接的参数变化是敏感的,任何一个参数的修改都会被(master)重新缓存(重复缓存含参页面)index.html和index.html?renew=1都会被认为是不同文件,分别缓存
试用场景
1、单地址的页面
2、对实时性要求不高的业务
3、离线webapp
h5 离线缓存小demo的更多相关文章
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
- H5 离线缓存的用法
H5离线缓存基础系列 1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...
- H5离线缓存(基础)学习指南
离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可 ...
- H5离线缓存机制-manifest
简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...
- H5离线缓存技术
HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...
- H5离线缓存基础系列
1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络 ...
- h5离线缓存
离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...
- 体验h5离线缓存
摘要 Application Cache是浏览器自己的一种机制,随着移动互联网时代的到来,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问.不仅能提高用户体验,而且在有网络时,也能直 ...
- H5 PWA技术以及小demo
H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...
随机推荐
- Windows虚拟机安装Linux系统
windows系统安装linux centos虚拟系统 1.下载 VMware Workstation Pro并安装,效果如图 2.下载linux系统 https://www.centos.org/d ...
- MongoDB环境配置
在官网上下载MongoDB可执行文件安装在电脑上后,想要运行需先安装路径下新建一个data文件夹,再在里面新建db文件夹用户存放数据库文件和相关配置. 在bin目录里面运行命令行: 这样MongoDB ...
- https网站无法加载http路径的js和css
在https的网站中引用http路径的js或css会导致不起作用,其形如: <script src="http://code.jquery.com/jquery-1.11.0.min. ...
- arguments解析
js中并没有函数重载的概念,但函数的arguments参数能帮助我们模拟重载. arguments并不是真正的数组,但拥有length(参数数目),且能通过数组下标的方式进行访问,例如argument ...
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- IntelliJ IDEA 中 右键新建时,选项没有Java class的解决方法和具体解释
我是在别人问我的时候,才发现还可以有这个问题,主要是他新项目直接打开,什么都没配置,就打算新建文件,其实可以直接看编辑器右下角的event log,那个对话框点开的话,可以add as maven p ...
- php flock 使用实例
php flock 使用实例 bool flock ( resource $handle , int $operation [, int &$wouldblock ] ) flock()允许执 ...
- JavaScript实现的功能
1.js事件阻止冒泡的应用 1)问题描述: 单机除了这两个元素,触发事件,: 可用阻止事件冒泡 2)解决方法: $('body').click(function(e){ $('#searchTree' ...
- Python之print语句Python的注释
话不多说直接切入正题 print语句可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print 'hello, world' 注意: 1. ...
- Tensorflow中的命名空间scope
1.name_scope 在tensorflow中有两种声明变量的方式,tf.get_variable()和tf.Variable(). name_scope对于tf.get_variable()无效 ...